React 라우팅 개념과 사용 방법

라우팅이란?

라우팅이란 URL의 여러 경로로 서로 다른 페이지를 로드할 수 있는 기능이다.

웹사이트는 하나의 특정 기능에 대해서 다른 경로를 가지는 다른 페이지를 로드하므로 URL이 변경되면 페이지에 보이는 콘텐츠가 변경된다.

이처럼 호출하려면 다른 페이지가 있으며 각 페이지에는 자체 URL 또는 도메인 뒤에 고유한 경로가 있어야 하고 경로가 변경되면 페이지의 콘텐츠도 변경되어야한다.

리액트로 작업하지 않을 때는 HTML 파일을 다시 보내는 서버가 있고 서버에 다른 HTML 파일을 저장하거나 해당 파일을 서버에서 동적으로 생성하여 콘텐츠를 보여준다.

이 방식은 URL에 대한 요청이 오면 다른 HTML 페이지가 클라이언트로 다시 전송되고 이 페이지는 브라우저에서 렌더링 된다.

즉, URL을 변경할 때마다 실행 중인 클라이언트 사이드 앱을 종료하여 모든 상태를 잃어버리고 요청 응답 주기를 기다려 브라우저가 새 페이지를 렌더링하도록 해야 한다.

이것이 바로 우리가 SPA를 사용하는 이유 중 하나인데 SPA는 브라우저에서 JavaScript로 할 수 있는 즉각적인 반응형 사용자 경험을 제공할 수 있기 때문이다.

사용자가 웹 사이트를 처음 방문할 때 처음 로드되는 HTML 페이지는 하나이고 그 다음부터는 JavaScript를 사용하여 도메인 뒤의 URL과 해당 경로를 조작할 수 있다.

또한 해당 URL이 변경되거나 링크를 클릭할 때 화면에 표시되는 내용을 변경할 수도 있다.

리액트에서 URL을 확인하고 URL 변경을 기반으로 라우팅을 수행하고 화면에 다른 컴포넌트를 가져와야하는데 이 모든 걸 브라우저에서 수행하려면 코드를 작성하거나 third party package를 사용해야한다.

다행히도 리액트에는 멀티 페이지 애플리케이션을 제작할 때 유용한 패키지가 있다.

클라이언트 사이드 라우팅을 지원하는 React Router라는 패키지다.

React Router 버전 5와 버전 6이 있는데 사실상 버전 5가 많은 프로젝트에서 사용되고 있기 때문에 버전 5를 설치한다.

npm install react-router-dom@5

먼저 이동하려는 페이지 컴포넌트를 만들고 Route로 감싼다.

Route prop으로 URL경로를 전달하여 경로를 활성화한다.

라우트 컴포넌트는 URL 경로가 동일한 경우에만 컴포넌트를 렌더링 할 것이고 아니라면 나타나지 않는다.

import { Route } from "react-router-dom";
import Products from "./pages/About";

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

export default App;

리액트 라우터 기능이 작동하려면 해당 경로를 정의하는 것 외에 다른 작업도 필요하다.

앱을 문서 요소로 렌더링하는 index에서 react-router-dom에서 제공하는 또 다른 컴포넌트인 BrowserRouter 컴포넌트를 import 한다.

그리고 앱 컴포넌트를 이 BrowserRouter 컴포넌트로 wrapping한다.

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