[동물 정보 사이트] 1. 메인 페이지에서 동물 목록 화면에 표시하기

1. 라우팅 정의 및 라우팅 생성 방법

사용자가 요청한 URL에 따라 알맞는 페이지를 화면에 보여주는 것을 `라우팅`이라고 한다. 오늘 과제는 컴포넌트 기반 라우팅 라이브러리인 React Router을 사용하여 동물 정보 사이트 화면을 구현하였다. 구현할 페이지가 많지 않아서 보다 직관적으로 라우트를 정의할 수 있는 `BrowserRouter`을 이용하였다.

(+ 스타일 컴포넌트를 이용한 CSS 컴포넌트들은 생략하였다.)

React Router에서 라우팅 생성 방법
1. JSX 문법으로 라우트를 설정하는 `BrowserRouter` 컴포넌트를 사용하는 방법
2. `createBrowserRouter`함수를 사용하여 Javascript 객체로 라우트를 설정하는 방법 (v6+)

2. 페이지 별 라우팅 과정

1. index.jsx 또는 main.jsx에서 App 컴포넌트를 BroswerRouter 컴포넌트로 감싼다.

import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

2. App 컴포넌트에서 Route들과, 이들을 감싸는 Routes 컴포넌트를 생성한다.

import Search from "./components/Search";
import Main from "./components/Main";
import Detail from "./components/Detail";

function App() {
  return (
    <>
      <header>
        <h1>💚 동물 조아 💚</h1>
      </header>
      <Routes>
        <Route path="/" element={<Main />}></Route>
        <Route path="/detail/:id" element={<Detail />}></Route>
        <Route path="/search" element={<Search />}></Route>
      </Routes>
      <footer>all rights reserved to OZ</footer>
    </>
  );
}

export default App;

Routes 컴포넌트
라우트를 정의하는 컴포넌트로, 자식 컴포넌트(Route) 중에서 매칭되는 첫 번째 요소만 렌더링한다.

Route 컴포넌트
항상 Routes 컴포넌트 내부에 위치하며, 경로(`path`)와 매칭될 컴포넌트(`element`)를 지정한다.

3. 메인 페이지를 구현하는 Main 컴포넌트에서 data.js 파일 내 데이터를 렌더링한다.

export default function Main() {
  return (
    <Wrapper>
      {data.map((el) => {
        const { id, name, img, description } = el;
        return (
          <Link to={`/detail/${id}`} key={id}>
            <Card>
              <Image src={img} alt={name} />
              <p>동물 이름 : {name}</p>
              <p>설명 : {description}</p>
            </Card>
          </Link>
        );
      })}
    </Wrapper>
  );
}

Link 컴포넌트를 이용하여 동물 카드 클릭시 특정 경로로 이동할 수 있도록, 동물의 `id`를 동적으로 반영하여 `/detail/:id` 형식으로 경로를 설정하였다. React Router에서 해당 경로(/detail/:id)를 처리하는 라우트를 설정하였기 떄문에 클릭한 동물의 고유한 경로가 생성될 수 있다.

<Route path="/detail/:id" element={<DetailPage />} />

Link 컴포넌트
- 다른 페이지로 이동하는 링크 기능을 제공하는 컴포넌트
- HTML <a> 태그와 동일한 기능을 하지만, 페이지를 새로고침 하지 않는다. 페이지 새로고침 없이, History API를 통해 브라우저 주소의 경로만 바꾸는 기능을 제공한다.

끄적끄적