[React] react-router-dom 사용하기!

라우팅이란, 호출되는 url에 따라서 페이지 이동을 시켜주는 것이다.
react에서 view는 component를 사용하게 된다. react에서 라우팅을 지원하는 친구들은 많지만, 가장 많이 쓰이는 것은 단연 react-router-dom이다.

이것도 패키지이기 때문에, 설치를 해주어야 한다. 아래는 설치 명령어이다.
npm install --save react-router-dom
이 패키지에서는 BrowserRouter, Route, Link의 기능을 제공한다.
Route는 호출되는 url에 따라서 이동할 component를 정의하게 된다. Link는 a태그와 같이, 페이지에 표시되는 링크를 클릭하면 url을 호출하게 된다.
그런데, Route와 Link를 사용하기 위해서는 BrowserRouter 태그로 감싸서 사용하여야 한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.css';

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

// 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();

App.js는 라우팅 전용 컴포넌트로 사용될 수 있다. App 컴포넌트와 하위 컴포넌트에서 Route, Link를 사용할 때마다 BrowserRouter 태그를 감싸 사용할 수도 있다. 하지만 최상위 컴포넌트를 해두면 편하잖아~

Route로 정의하여 보기

Route는 서버에 호출된 url의 path에 따라서 연결할 component를 정의할 수 있다.