[React] URL마다 다른 컴포넌트 넘겨주기

웹사이트를 구현하다 보면, 여러 URL에 대하여 각기 다른 페이지들을 넘겨줄 경우가 있다.
다행히 리액트에서는 react-router-dom 라이브러리를 통해 이러한 기능을 제공한다.
사용 방법을 바로 살펴보자.

01. 라이브러리 설치

npm install react-router-dom

가장 먼저 라이브러리를 설치한다.

02. Router.js 파일 만들기

패키지 설치가 끝났으면 경로별로 어떤 컴포넌트를 넘길지를 처리해줄 라우터 컴포넌트를 만들어준다.
이때 Router.js의 위치는 index.js와 같은 디렉토리에 만들어준다.

Router.js

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

function Router({authorized, component})  {
    return <BrowserRouter>
        <Routes>
            <Route path='/' element={<div>안녕</div>} />
            <Route path='/2' element={<div>안녕2</div>} />
        </Routes>
    </BrowserRouter>
}

export default Router

사용방법은 다음과 같다.

1. BrowserRouter 태그를 만든다.
2. Routes 태그를 만든다.
3. Route 태그를 만든다.
   • 이때 path 속성으로 처리할 URL을 넣어준다.
   • element 속성으로 URL과 매핑시킬 컴포넌트를 넣어준다.

03.index.js에서 Router.js를 기본 컴포넌트로 등록

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Router from './Router';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

04. 실행 결과

잘 되는 것을 볼 수 있다.