[리액트] 멀티 페이지 구현하기 with react-router-dom

본 글은 node.js 17.8.0, react 17.0.2, react-router-dom 6.3.0 버전을 기준으로 작성되었습니다.

리액트는 SPA(Single Page Application)를 위한 라이브러리입니다.
하지만 많은 웹 앱은 여러 페이지가 필요합니다.
이럴 때 일반적인 정적 웹 사이트처럼 여러 페이지를 만들고 주소에 따라 다른 페이지를 불러올 수도 있지만 이 경우 다른 페이지로 갈 때마다 웹 서버에서 웹페이지를 요청해야 한다는 단점이 있습니다.
리액트 라이브러리 중에는 여러 페이지를 만들고 주소에 따라 다른 페이지를 보여주면서도 웹 서버에서 웹페이지를 새로 요청하지 않아도 되게 해주는 라이브러리가 있습니다. 바로 제목에도 나와있는 react-router-dom입니다.

1. react-router-dom이란?

react-router-dom은 주소의 sub url를 인식하여 웹 서버에 별도의 페이지 요청 없이 sub url에 맞는 컴포넌트를 보여주는 라이브러리입니다.
react-router 라이브러리를 기반으로 제작되었으며, react-router 라이브러리는 웹과 앱 모두에서 사용 가능합니다.

2. react-router-dom 설치하기

• npm을 사용할 경우

npm i react-router-dom

• yarn을 사용할 경우

yarn add react-router-dom

3. react-router-dom 사용하기

react-router-dom에서 사용할 수 있는 라우터는 BrowserRouter와 HashRouter입니다.
BrowserRouter는 일반적인 라우터로 일반적인 sub url을 지원합니다.
HashRouter는 sub url 앞에 /#/이 첨가되는 라우터로 브라우저나 웹 서버의 제약으로 url에 파일의 확장자가 존재해야 하는 경우(예: https://localhost/index.html)를 지원합니다.
url에 파일의 확장자가 존재해야 하는 경우가 아니라면 BrowserRouter를 사용하면 됩니다.
sub url에 따라 다른 컴포넌트를 출력해야 할 곳에 아래와 같이 코드를 작성합니다.

<BrowserRouter>
  <Routes>
    <Route exact path='/' element={Main} />
  </Routes>
</BrowserRouter>