[React] 라우터 적용하기

1. 라우팅: Routing이란 무엇인가

해당하는 페이지에 가기 위해 서버에서 요청한 url에 대한 정보를 전달해주는 것을 말한다. 즉, 서버로부터 새로운 데이터인 html을 전달받아 오는 것이다. 이때 브라우저 페이지 전체가 새로운 데이터를 받아오게 된다.

정보를 전달받아 오는 구체적인 과정은 다음과 같다.

1. 새로운 url 경로 입력하기
2. url에 대한 정보를 네트워크 서버에 요청하기
3. 서버로부터 새로운 데이터인 html을 받아와 페이지 전체 업데이트하기

 

2. CSR: Client Side Routing이란 무엇인가

일반적인 라우팅과 달리 새로운 링크를 클릭할 때 url이 업데이트가 되지만, 페이지 전체가 새로운 데이터를 받아오는 것이 아니다. 즉, 완전히 새로운 html을 받아 오는 것이 아니라 해당 페이지에 필요한 정보만 fetch를 통해 받아오는 것이다. 필요한 부분만 업데이트가 된다는 강력한 장점을 지니고 있는 방식이다.

정보를 받는 구체적인 과정은 다음과 같다.

1. 새로운 url 경로 입력하기
2. 어플리케이션 내에서 업데이트가 필요한 부분만 동적으로 네트워크에 요청하기
3. json 형태의 데이터 받아오기

 

3. 라우터 적용하는 방법

리액트에 라우터를 적용하기 위해선 먼저 라이브러리 설치가 필요하다.

(1) Router Dom 설치하기

yarn add react-router-dom

 

(2) 작업구조 설정하기

라우터는 페이지들을 연결하기 위한 수단으로 볼 수 있다. 고로 이동이 필요한 컴포넌트들을 설계해야 한다. 이는 라우터의 설정을 진행하는 동시에 라우팅이 원활히 이루어지는지 확인하기 위한 과정이다.

| pages
| - SignUp.jsx
| - NotFound.jsx
| - Home.jsx

| App.js
| index.js

 

(3) Index.js로 이동하기

App.js와 index.js 중 원하는 위치에서 라우터를 사용하면 된다. 필자는 App.js와 index.js에서 모두 라우터를 사용한 경험이 있는데, index.js에서 작업하는 것이 컴포넌트의 작동 원리를 파악하기 쉽다고 판단하여 index.js에서 작업할 것이다.

부가적인 설명을 하자면 App.js에서는 element에 <App />을 작성하지 못한다. 라우팅이 중복되는 문제가 발생하기 때문이다. 하지만 index.js에선 작성할 수 있어서, App.js의 작동 구조를 한 눈에 파악하기 쉽다. index.js에는 라우팅과 관련된 부분들이 들어가고, App.js에선 실제 컴포넌트를 적어주면 분리된 구조로 라우터를 설계할 수 있다.

 

(4) 라우터 생성하기

import { createBrowserRouter } from 'react-router-dom';
const router=createBrowserRouter([
	{
    	
    }
]);

 

(5) 라우터에 필요한 컴포넌트 작성하기

const router=createBrowserRouter([
  {
    path:'/',
    element:<App />,
    errorElement:<NotFound />
  },
  {
    path:'/signup',
    element:<Signup />
  }
]);

path: url 경로
element: 해당 url 경로로 이동했을 때, 보여지는 요소

 

(6) 라우터 적용하기

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

 

4. 실제 프로젝트 적용 방법

먼저, index.js의 부분이다.

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

import Signup from './pages/Signup';
import Home from './pages/Home';
import NotFound from './pages/NotFound';

const router=createBrowserRouter([
  {
    path:'/',
    element:<App />,
    errorElement:<NotFound />,
    children:[
      {index:true,element:<Home />},
      {path:'/notfound',element:<NotFound />}
    ]
  },
  {
    path:'/signup',
    element:<Signup />
  }
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={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();

App.js의 부분이다.

import { Outlet} from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar';

function App() {
  return (
    <>
      <Outlet />
      <Navbar />
    </>
  )
}

export default App;

 

5. 리액트 라우터 공식 문서

📂 주소: https://reactrouter.com/en/main/start/overview

Feature Overview v6.16.0