React) react-router-dom을 이용한 페이지 라우팅

 리액트는 자체적으로 라우팅 기능을 제공하지 않기 때문에, 추가적인 모듈을 사용해야 하는데, 여기에는 대표적으로 react-router-dom이 있다. react-router-dom 모듈을 사용하는 방법은 간단하다. 먼저, 1) 전체 DOM을 렌더링하는 최상위 html을 'react-router-dom'에서 제공하는 BrowserRouter로 감싸준다.

 예를 들어, 최상위 컴포넌트가 '#root'인 경우에는 아래와 같이 작성할 수 있다. (아래는 최상위 컴포넌트 js 파일이다.)

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
          <App />
      </BrowserRouter>
  </React.StrictMode>
);

 

 그 다음으로 2) 라우팅 하고자 하는 컴포넌트들을 Route를 이용해 작성하고, 이들 모두를 Routes로 묶는다. 이 때, path는 라우팅될 경로를 적고 element에는 라우팅될 컴포넌트를 작성하면 된다.

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

function App() {
  return {
    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/question" element={<Question/>} />
      <Route path="/result" element={<Result/>} />
    </Routes>
  }
}

 

 마지막으로 3) 함수를 통해 특정 이벤트(여기서는 click)가 발생했을 때 라우팅하고자 한다면 'react-router-dom'의 useNavigate 함수를 호출하면 된다. 여기에 인자로 라우팅하려는 경로를 입력하면, 바로 위(2번)에서 지정해둔 경로의 컴포넌트를 보여준다. 이 때 동등한 위상관계의 타 라우팅 컴포넌트들은 숨겨진다.

 

아직은 간단해보이는 이러한 기능 조차 실행될 때 재밌고 신기하다..! 얼른 빨리 리액트에 익숙해져서 프로젝트를 진행하는데 많은 도움이 되길 바란다😁