React 네비게이션 튜토리얼 | React Router | 클라이언트 사이드 라우팅 (React Navigation)

소개

이 프로젝트에서는 React 애플리케이션에서 네비게이션 기능을 구현하는 방법을 배우게 됩니다. 네비게이션 바와 링크를 사용하여 이동할 수 있는 페이지가 있는 간단한 애플리케이션을 만들 것입니다.

👀 미리보기

project preview

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

프로젝트를 설정하고 종속성을 설치하는 방법
네비게이션 바의 메뉴 네비게이션을 활성화하기 위해 라우트 (route) 와 라우트 매처 (route matcher) 를 추가하는 방법
카드 목록에서 개별 카드로 네비게이션을 추가하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

React Router 를 사용하여 클라이언트 측 라우팅을 처리할 수 있습니다.
React 애플리케이션에서 링크를 생성하고 다른 페이지 간을 이동할 수 있습니다.
React Router 의 state 객체를 사용하여 컴포넌트 간에 데이터를 전달할 수 있습니다.

프로젝트 설정

이 단계에서는 프로젝트를 설정하고 필요한 종속성을 설치하는 방법을 배우게 됩니다.

코드 편집기를 열고 프로젝트 디렉토리로 이동합니다.

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── components
│   │   ├── Card.js
│   │   ├── Cards.js
│   │   └── Home.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

다음으로, 터미널에서 npm install 명령을 사용하여 종속성을 다운로드합니다. 종속성 다운로드가 완료될 때까지 기다린 다음 npm start 명령을 사용하여 프로젝트를 시작합니다.

프로젝트가 성공적으로 시작되면 "Web 8080"을 클릭하여 브라우저에서 미리 봅니다.

라우트 및 라우트 매처 추가

이 단계에서는 네비게이션 바의 메뉴 네비게이션을 활성화하기 위해 라우트와 라우트 매처를 추가하는 방법을 배우게 됩니다.

src/index.js 파일을 열고 필요한 모듈을 가져옵니다:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

App 컴포넌트를 BrowserRouter 컴포넌트로 감쌉니다:

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

src/App.js 파일을 열고 필요한 컴포넌트와 모듈을 가져옵니다:

import React from "react";
import { Route, Switch, Link } from "react-router-dom";
import { Home } from "./components/Home";
import { Cards } from "./components/Cards";
import { Card } from "./components/Card";
import "./App.css";

네비게이션 메뉴와 다양한 라우트를 처리할 Switch 컴포넌트를 추가합니다:

const App = () => {
  return (
    <div className="app">
      <header>
        <Link to="/" className="menu menu-1">
          homepage
        </Link>
        <Link to="/cards" className="menu menu-2">
          card page
        </Link>
      </header>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/cards" exact component={Cards} />
        <Route path="/cards/:id" component={Card} />
      </Switch>
    </div>
  );
};

Switch 컴포넌트는 한 번에 하나의 라우트만 렌더링되도록 보장하며, Route 컴포넌트는 다양한 라우트와 해당 렌더링될 컴포넌트를 정의합니다.

카드 목록에서 개별 카드로 이동 기능 추가

이 단계에서는 카드 목록 페이지에서 개별 카드 페이지로 이동하는 코드를 추가하는 방법을 배우게 됩니다.

src/components/Cards.js 파일을 열고 필요한 모듈을 가져옵니다:
```
import React from "react";
import { Link } from "react-router-dom";
```

개별 카드 페이지로의 링크와 함께 카드 목록을 렌더링하는 코드를 추가합니다:

export const Cards = () => {
  const colors = ["#26547c", "#ef476f", "#ffd166", "#06d6a0"];

  return (
    <div className="page cards">
      {colors.map((c, idx) => {
        return (
          <Link
            key={idx}
            to={{
              pathname: `/cards/${idx + 1}`,
              state: { bgColor: c }
            }}
          >
            <div
              className={`card card-${idx + 1}`}
              style={{ backgroundColor: c }}
            >
              Card {idx + 1}
            </div>
          </Link>
        );
      })}
    </div>
  );
};

Link 컴포넌트는 개별 카드 페이지로의 링크를 생성하는 데 사용되며, to prop 은 경로와 Card 컴포넌트로 전달될 상태를 지정하는 데 사용됩니다.

src/components/Card.js 파일을 열고 필요한 모듈을 가져옵니다:

import React from "react";
import { useParams, useLocation } from "react-router-dom";

개별 카드 페이지를 렌더링하는 코드를 추가합니다:

export const Card = () => {
  const { id } = useParams();
  const { state } = useLocation();

  return (
    <div
      className="page card-page"
      style={{ backgroundColor: state.bgColor }}
    >
      <p>Card {id}</p>
    </div>
  );
};

useParams 훅은 URL 에서 id 매개변수를 검색하는 데 사용되며, useLocation 훅은 Cards 컴포넌트에서 전달된 state 객체를 검색하는 데 사용됩니다.

이제 프로젝트를 완료했습니다. 완성된 결과는 다음 스크린샷에 나와 있습니다. 카드 페이지를 클릭하면 카드 목록 페이지로 이동하고, 각 카드를 클릭하면 개별 카드 페이지로 이동합니다.

카드 목록과 개별 카드 간의 네비게이션