React Router로 라우트 처리하기

우리는 싱글 페이지 애플리케이션을 만들고 있기 때문에, 클라이언트 측에서 라우트를 처리하기 위해 React Router를 사용할 것입니다.

React Router를 사용하면 /login과 같은 라우트를 지정할 수 있습니다. 그리고 사용자가 해당 페이지로 이동할 때 로드될 React 컴포넌트를 지정할 수 있습니다.

먼저 React Router를 설치해 보겠습니다.

React Router 설치하기

packages/frontend/ 디렉토리에서 다음 명령어를 실행하세요.

$ npm install react-router-dom

이 명령어는 패키지를 설치하고 React 앱의 package.json에 의존성을 추가합니다.

React Router 설정하기

아직 앱에 라우트를 설정하지 않았지만, 기본 구조를 준비할 수 있습니다. 현재 앱은 src/App.tsx의 App 컴포넌트에서 실행됩니다. 이 컴포넌트를 전체 앱의 컨테이너로 사용할 예정입니다. 이를 위해 App 컴포넌트를 Router로 감싸겠습니다.

src/main.tsx에서 다음 코드를:

<React.StrictMode>
  <App />
</React.StrictMode>

이렇게 변경합니다:

<React.StrictMode>
  <Router>
    <App />
  </Router>
</React.StrictMode>

그리고 src/main.tsx의 헤더에 다음을 추가합니다.

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

여기서 두 가지 작은 변경을 했습니다.

1. BrowserRouter를 라우터로 사용합니다. 이는 브라우저의 History API를 사용하여 실제 URL을 생성합니다.
2. Router를 사용해 App 컴포넌트를 렌더링합니다. 이를 통해 App 컴포넌트 내부에서 필요한 라우트를 생성할 수 있습니다.

이제 브라우저로 이동하면, 이전과 동일하게 앱이 로드됩니다. 유일한 차이점은 React Router를 사용해 페이지를 제공한다는 점입니다.

다음으로 앱의 다양한 페이지를 어떻게 구성할지 살펴보겠습니다.