React Router로 라우팅하기

최근에 만든 프로젝트도 그렇고 처음 시작을 Next.js프레임워크를 사용해서 개발을 해오다 보니 리액트 자체만을 사용해 무언가 개발해 본 적은 없었다. 그래서 리액트만을 사용해서 그동안 공부해 왔던 개념들을 빠르게 적용해 보는 중이다. 그중에서 리액트에서 라우팅을 공부한 뒤에 간단하게 실습을 해보았다.

 

Next.js에서 페이지 이동과 관련된 기능을 적용하고 싶을 때는 useRouter 훅을 사용하면 되는데, router안에 포함된 메서드를 사용할 수 있다. 메서드와 관련된 상세 내용은 공식문서를 대신 첨부한다. 공식문서

 

리액트는 URL을 판단하여 특정 페이지를 보여주는 기능을 제공하지 않는다. 그러므로 관련 작업을 하기 위해서 react-router라는 라이브러리를 설치해서 사용해야 한다. 이 라이브러리를 이용하면 리액트에서 URL에 해당하는 컴포넌트를 표시하거나, URL을 통해 특정 페이지로 이동하는 기능을 적용할 수 있다.

react-router 설치

npm install react-router-dom@6 --save

BrowserRouter

react-router 컴포넌트인 BrowserRouter 컴포넌트 안에서 라우터 기능들이 동작되므로 최상위 컴포넌트에 적용해 주었다.

// index.tsx 

import React from 'react';

import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
...
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
);
...

Routes & Route

라우터 기능들을 사용한다고 설정해 주었으니, App컴포넌트에서 Routes와 Route 컴포넌트들을 사용하여 URL에 따라 화면이 변경될 컴포넌트를 정의해 주는 작업을 해야 한다. 

import { Route, Routes } from 'react-router-dom';
...
<Routes>
  <Route path="특정 URL" element={특정 URL에 해당하는 컴포넌트}></Route>
  <Route path="/example" element={<Example />}></Route>
  ...
</Routes>

useNavigate Hooks

다음으로 페이지를 전환하기 위해 useNavigate라는 훅을 사용하여 이동이 필요한 페이지에 적용해주어야 한다.

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

export function MyComponent() {
  const navigate = useNavigate();
  return (
    <>
      <button onClick={() => navigate('/example')}>Example 컴포넌트로 이동하기</button>
    </>
  );
}

Link

리액트 라우터에서 URL이 변경될 때 탐색하는 방법에는 두 가지가 있는데 위에서 소개한 useNavigate 훅과 Link 컴포넌트가 있다. 두 가지 방법은 페이지를 라우팅 하는 데 사용한다는 것에서는 동일하지만 Link컴포넌트는 페이지를 새로고침하지 않고 클릭하면 이동할 수 있는 형태이고, useNavigate 훅을 사용하는 경우에는 프로그래밍 방식으로 페이지를 라우팅 할 때 사용하는 방식이다. 프로그래밍 방식으로 페이지를 라우팅 한다는 의미를 예를 들면 작업을 완료하고 버튼을 눌렀을 때 특정페이지로 리디렉션 되는 것처럼 특정 이벤트가 발생한 후 사용한다는 것이다. <Link /> 컴포넌트의 Props인 to를 이용해서 클릭할 때 이동할 페이지의 링크를 추가하면 앵커태그 <a>와 같은 형태로 사용할 수 있다.

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

function MyComponent() {
  return (
    <>
      <Link to="/about">Go to About page</Link>
    </>
  );
}

 

위에서 공부한 개념들로 간단한 페이지 라우팅 기능을 만들어 보았다. 헤더의 메뉴를 클릭하면 해당페이지의 URL로 이동하는 것을 확인할 수 있다. react-router 라이브러리의 모든 기능을 사용해 본 것은 아니지만 앞으로 어떤 방법으로 사용할지는 그때그때 필요한 기능을 익히면 될 것 같다. 또한 Next.js와의 라우팅 방법에 대한 차이도 충분히 이해할 수 있었다. 다음에는 Next.js에서 useRouter 훅의 여러 가지 메서드에 대해서도 비교해서 공부해 봐야겠다.

 

---

참고

react-router 라이브러리 공식문서

Link와 useNavigate 차이