리액트 라우터(React Router)는 리액트 애플리케이션에서 라우팅과 관련된 기능을 제공하는 패키지입니다. 이를 사용하면 싱글 페이지 애플리케이션(SPA)에서 다른 페이지로의 이동과 URL 변경을 쉽게 처리할 수 있습니다.

설치하기

1. npm을 사용하는 경우, 터미널에서 다음 명령을 실행하여 리액트 라우터를 설치합니다:

npm install react-router-dom

1. yarn을 사용하는 경우, 터미널에서 다음 명령을 실행합니다:

yarn add react-router-dom

사용하기

1. 리액트 라우터를 사용하기 위해 react-router-dom에서 BrowserRouter를 import합니다:

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

1. 애플리케이션의 <App> 컴포넌트를 <BrowserRouter>로 감싸줍니다:

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

1. 이제 <Route> 컴포넌트를 사용하여 경로와 해당 경로에 매핑되는 컴포넌트를 정의할 수 있습니다. 예를 들어, /about 경로에는 About 컴포넌트를 렌더링하고, /contact 경로에는 Contact 컴포넌트를 렌더링하도록 설정할 수 있습니다:

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </div>
  );
}

1. 이제 애플리케이션의 일부 링크를 클릭하면 해당 경로에 매핑되는 컴포넌트가 렌더링됩니다. 예를 들어, <Link> 컴포넌트를 사용하여 /about 경로로 이동할 수 있습니다:

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <div>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </div>
  );
}

이제 리액트 라우터를 사용하여 라우팅 기능을 애플리케이션에 추가할 수 있습니다!

더 자세한 정보는 React Router 공식 문서를 참조하세요.