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

소개

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

👀 미리보기

🎯 과제

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

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

🏆 성과

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

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

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 83%입니다.학습자들로부터 86%의 긍정적인 리뷰율을 받았습니다.

프로젝트 설정

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

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

├── 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 객체를 검색하는 데 사용됩니다.

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