[Front-end/React] BrowserRouter 라이브러리 사용하기

React는 SPA(Single Page Application)으로, 하나의 페이지를 동적으로 활용하여 웹 페이지를 구성하는 방식을 의미한다. 사용자의 동작에 대해 자원을 동적으로 관리하여 효율적으로 기능하도록 하는 것이 목적이다.

따라서 React는 URL 마다 새로운 페이지를 호출하는 것이 아니라, Router를 통해 변경될 부분의 코드만 불러온다.

 

이 때 사용하는 React Router는 여러 종류가 있지만, 우리는 BrowserRouter 라이브러리를 활용하려고 한다.

이 라이브러리를 사용하기 위해서 아래 코드를 터미널에 실행하여 설치하여 준다.

npm i -s react-router-dom

 

그리고 index.js 에서 </App> 코드를 <BrowserRouter>로 감싸준다.

index.js 코드의 전체 코드를 확인해보면 아래와 같다.

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

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