[React Router v6] 1. BrowserRouter

준비하기

실습하며 공부할 생각이라 리액트 프로젝트를 만들어 줍니다.

react 프로젝트 설치가 완료되면 react-router-dom을 설치합니다.

이제 해당 프로젝트를 실행시켜주고 vsCode로 폴더를 열어줍니다.

준비가 완료되면 Router 공부를 시작하겠습니다.

React-Router

기존에는 페이지를 이동할 때 새로운 파일을 서버로부터 전송받아 화면에 출력했지만 페이지가 많아짐에 따라 새로운 기술 SPA(Single Page Application)와 Router가 등장했습니다. 이 기술은 서버에는 필요한 데이터가 있을 때만 호출을 하고 나머진 사용자 브라우저 자바스크립트로 처리해 서버에 부하를 줄였습니다. Single Page이지만 자바스크립트를 이용해 주소에 따라 여러 페이지를 출력하는 데 이때 사용하는 게 Router로 주소에 맞게 화면을 출력합니다.

 

즉 사실은 한 페이지를 사용하지만 사용자 브라우저에서 자바스크립트로 주소에 알맞게 페이지를 출력해주는 기술이라 정리하겠습니다.

createBrowserRouter

웹 프로젝트에서 사용되는 라우터로 DOM History API로 url를 변경하고, history stack을 관리합니다.

한번 createBrowserRouter를 사용해 기존 index.js를 변경해줍니다.

 

index.js

import React from 'react';
import ReactDOM, { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/",
    element: <App></App>
  }
])

createRoot(document.getElementById('root')).render(
  <RouterProvider router={router}></RouterProvider>
)

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

기존 BrowserRouter를 사용해도 상관없습니다.

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

 

결과를 보면 딱히 달라진게 없습니다. 기존 http://localhost:3000/ 주소도 똑같고 달라진게 없죠.

 

그래서 path를 약간 변경해봅시다.

 path: '/app',

 

기존 루트 경로에는 error 페이지가 뜨고 http://localhost:3000/app으로 접속을 해야 App 화면이 나타납니다.

이제 Router의 개념이 슬슬 잡히기 시작하는 것 같습니다.

Router

이번에는 새로운 컴포넌트를 만들어 router로 연결해봅시다.

기존 index.js BrowserRouter에 router를 등록해줍니다.

 

index.js

createRoutesFromElements 방법과 RoutesObject 방법이 있습니다.

 

방법1

const router = createBrowserRouter(
    createRoutesFromElements(
    	<>
            <Route path="/" element={<App />} />
            <Route path="home" element={<Home />} />
            <Route path="blog" element={<Blog />} />
        </>
    )
);

방법2

const router = createBrowserRouter([
    {
        path: '/',
        element: <App></App>,
    },
	{
        path: "home",
        element: <Home></Home>
    },
    {
        path: "blog",
        element: <Blog></Blog>
    }
]);

 

Home.js

import React from 'react';

const Home = () => {
    return (
        <div>
            <h1>HOME</h1>
            <p>HOME PAGE 입니다.</p>
        </div>
    );
};

export default Home;

Blog.js

import React from 'react';

const Blog = () => {
    return (
        <div>
            <h1>BLOG</h1>   
            <p>BLOG PAGE 입니다.</p>
        </div>
    );
};

export default Blog;

App.js

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

const App = () => {
  return (
    <div>
        <h1>APP</h1>
        <p>APP PAGE 입니다.</p>
    </div>
  );
};

export default App;

index.js, Home.js, Blog.js, App.js를 작성 후 어떤식으로 작동하는지 봅시다.

 

http://localhost:3000/

APP

http://localhost:3000/app/home

Home

http://localhost:3000/app/blog

Blog

 

다음 글에서는 segment를 사용한 다양한 path를 알아보겠습니다.