리액트 앱을 개발하다보면 여러 페이지를 가지는 웹 애플리케이션을 구현해야 할 때가 있습니다. 이때, 리액트 라우터를 사용하면 각 페이지 간의 라우팅을 쉽게 관리할 수 있습니다.

리액트 라우터 소개

리액트 라우터는 싱글 페이지 애플리케이션(SPA)에서 여러 페이지 간의 이동 및 관리를 위한 라이브러리입니다. 이를 통해 URL을 기반으로 컴포넌트를 렌더링하고, 동적인 URL 라우팅 및 내비게이션을 구현할 수 있습니다.

리액트 라우터 설치 및 설정

먼저, 리액트 라우터를 설치해야 합니다. 다음 명령어를 사용하여 리액트 라우터를 설치합니다.

npm install react-router-dom

react-router-dom 패키지는 웹 애플리케이션에서 사용할 수 있는 리액트 라우터의 핵심 기능을 제공합니다.

리액트 앱의 최상위 컴포넌트에서 라우터를 설정해야 합니다. 보통 index.js 파일에서 라우터를 설정합니다. 아래는 라우터를 설정하는 예제 코드입니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Route 컴포넌트로 페이지 라우팅하기

라우터를 설정한 후, 각 페이지에 대한 라우팅을 구현해야 합니다. 이를 위해 Route 컴포넌트를 사용합니다. 각 Route 컴포넌트는 특정 URL 경로와 해당 경로에 렌더링할 컴포넌트를 지정합니다.

아래는 Route 컴포넌트를 사용하여 페이지를 라우팅하는 예제 코드입니다.

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  );
};

export default App;

위 예제에서는 Home, About, Contact 컴포넌트를 각각의 경로에 매핑시켰습니다.

결론

리액트 라우터를 사용하면 SPA에서 다양한 페이지 간의 라우팅을 손쉽게 구현할 수 있습니다. react-router-dom을 활용하여 라우팅 및 내비게이션을 구현하여 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

리액트 라우터에 대해 더 자세히 알고 싶다면 리액트 라우터 공식 문서를 참고하시기 바랍니다.