[React] React Router

[React] React Router

 

📌 라우팅

사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것

여러 페이지로 이루어진 웹 애플리케이션을 만들 때 페이지별로 컴포넌트를 분리해서 프로젝트를 관리하기 위해 라우팅이 필요하다.

리액트 라우터는 라우팅 시스템으로 가장 많이 사용하는 인기있는 라이브러리이다.

리액트 라우터를 사용하면 SPA(Single Page Application) 를 구현할 수 있다.

 

📌 Single Page Application(SPA, 싱글 페이지 애플리케이션)

SPA 는 한 개의 페이지로 이루어진 애플리케이션이다.

리액트 라우터는 여러 페이지로 이루어진 프로젝트를 만들 수 있는 것이라고 했다.

그런데 왜 싱글 페이지 애플리케이션이라고 하는 것일까?

 

✅ MPA(Multipage Application)

전통적인 웹페이지는 여러 페이지로 구성되어 있었다.

링크를 누르고 페이지를 이동할 때마다 각각 다른 html 문서로 이동했고, 페이지마다 다른 html, css, JS, 이미지 파일을 불러왔다.

그렇기 때문에 브라우저는 매번 새로고침될 수밖에 없었다.

이러한 방식은 서버에서 리소스를 전달받아와서 렌더링하는 방식인데, 웹 애플리케이션 뷰를 서버에서 담당했다고 볼 수 있다.

렌더링을 서버에서 담당한다는 말은 즉 그만큼의 서버 자원이 사용되는 것이고 불필요한 트래픽이 낭비된다는 소리이다.

 

이러한 방식은 웹 애플리케이션의 규모가 커지고 사용자와의 인터렉션이 많아져 성능 저하의 원인이 되었다.

 

✅ SPA(Single Page Application) 

싱글 웹 애플리케이션이란 브라우저가 웹 애플리케이션을 불러와 렌더링하고, 사용자와의 인터렉션이 발생하면 필요한 부분만 업데이트하는 것을 말한다.

즉 사용자의 인터렉션으로 새로운 데이터가 필요하면 서버의 API 를 호출해 필요한 데이터만 다시 렌더링하는 것이다.

이렇게 싱글 웹 애플리케이션은 기술적으로 한 페이지이지만, 사용자가 경험하기에 여러 페이지인 것처럼 느껴진다.

 

이때 라우팅 시스템은 사용자의 브라우저 주소창의 경로에 따라 다른 뷰를 보여주게 된다.

 

이제 라우터를 사용하면 서버에 다른 페이지를 새로 요청하는 것이 아니라, 브라우저 API 를 사용하여 브라우저 주소창의 값만 변경하고 기존에 띄웠던 웹 애플리케이션을 유지하면서 또 다른 페이지를 보여준다.

 

📌 SPA에도 단점이 있다!

SPA 의 단점은,

서비스의 규모가 커지면 파일 크기가 너무 커진다는 점!

 

유저가 실제로 방문하지 않은 페이지도 불러오기 때문이다.

 

라우팅 서비스를 사용하면 자바스크립트가 실행될 때까지 페이지가 비어있기 때문에 검색 엔진에서 노출이 잘 안될 수도 있고, 자바스크립트 파일이 캐싱되지 않은 순간 흰 페이지가 나타날 수 있다는 단점이 있다.

 

하지만 이것도 해결할 수 있는 방법이 있는데

서버 사이드 렌더링을 하는 방법이다!

 

📌 리액트 라우터 설치

npm install react-router-dom

설치를 하고자 하는 폴더 디렉토리로 이동해서 명령어를 입력해준다.

설치가 되었으면 package.json 의 dependencies 에 react-router-dom 가 추가된다.

 

✅ npm install 시 --save 입력하는 이유

--save 옵션을 입력하면 package.json의 dependency 항목에 모듈을 추가한다는 의미이다.

하지만 npm5 부터는 --save 옵션이 기본 옵션으로 적용되게 되었다.

따라서 --save 옵션을 굳이 붙이지 않아도 dependencies 리스트에 추가되는 것이다.

 

📌 리액트 라우터 사용하기

먼저 해야할 일은 브라우저 라우터를 생성하고 첫 번째 경로를 구성하는 것이다.

이렇게 하면 웹 앱에 대한 클라이언트 측 라우팅이 활성화된다.

main.jsx 에 리액트 라우터를 세팅한다.

 

✅ createBrowserRouter 함수를 사용해 브라우저 라우터를 생성

📄 src/main.jsx

react-router-dom 에서 createBrowserRouter, RouterProvider 를 꺼내온다.

루트 경로에 RouterProvider 컴포넌트를 추가하고, prop 으로 route 를 지정해준다.

RouterProvider 의 prop 으로 router={router} 를 사용하면, 클라이언트 사이드 라우팅이 활성화된다.

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

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

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

첫번째 라우트는 루트 라우트 역할을 한다.

왜냐하면 나머지 라우트가 첫번째 라우트 내부에서 렌더링이 되기 때문이다.

이 루트 라우트는 이후에 중첩된 레이아웃을 가진다.

 

📄 src/routes/App.jsx

애플리케이션에 글로벌 레이아웃 컴포넌트를 추가한다.

function App () {
  return (
    <>
      <h2>라우터 배우기</h2>
    </>
  )
}

export default App

 

✅ 경로 설정 및 컴포넌트 추가

📄 src/main.jsx

main.jsx 에 레이아웃 컴포넌트를 추가한다.

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

 

📌 오류 처리

📄NotFound.jsx

export default function NotFound(){
  return <p>유감이지만,
    <br/>
    페이지를 찾을 수가 없네요?🥹</p>
}

오류화면에 띄워줄 컴포넌트를 작성한다.

 

📄NotFound.jsx

import NotFound from './NotFound';

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

createBrowserRouter 함수 내에 NotFound 컴포넌트를 넣어준다.

경로를 잘못 입력할 경우 NotFound 컴포넌트를 마운트하고 해당 UI 를 렌더링한다.

 

📌 중첩 라우팅

📄App.jsx

import { Outlet } from 'react-router-dom';

function App () {
  return (
    <>
      <h2>라우터 배우기</h2>
      <Outlet />
    </>
  )
}

export default App

루트 라우트에 자식 라우트가 올 자리라고 Outlet 컴포넌트를 사용해서 알려야한다.

 

📄main.jsx

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

children 에 정의하는 컴포넌트들은 App.jsx 의 Outlet 컴포넌트에 마운트된다.

index 를 true 로 갖고 있는 자식 컴포넌트는 기본값으로 Outlet 의 기본 화면으로 보여지게 된다.

이런식으로 children 에 자식 컴포넌트를 추가해 중첩 라우팅을 할 수 있다.

 

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: '/Order',
        element: <Order />
      },
      {
        path: '/List',
        element: <List />
      },
      {
        path: '/Help',
        element: <Help />
      },
    ]
  },
]);

function Home(){
    return <p>홈 화면</p>
}

function Order(){
    return <p>주문 페이지</p>
}

function List(){
    return <p>상품 리스트 페이지</p>
}

function Help(){
    return <p>고객센터</p>
}

 

 

 

 

---

참고 : 벨로퍼트와 함께하는 모던 리액트, React Router v6 튜토리얼(writed by Minjun Kim's velog)
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.