[React Library] React Router의 개념과 사용방법

 

💡 React 강의를 보며 프로젝트를 만들던 도중 강의에서 React Router 라이브러리를 사용하는데, 이에 대해 정확이 이해하고 공부하기 위해 React Route에 대해 정리하려고 합니다.

리액트 라우터(React Router)에 대한 정확한 정보는 공식문서를 통해 확인하는 것이 가장 좋고, 이 글은 공식문서와 여러 블로그를 참고하여 작성하였습니다.

 

 

 

React Router는 Client Side Routing을 가능하게 한다.

 

Client Side Routing을 통해 서버에서 다른 문서를 요청하지 않고도 링크를 클릭함으로써 URL을 업데이터할 수 있다. 즉시 새 UI를 렌더링 하고 fetch를 통해 데이터 요청을 수행하여 페이지를 새 정보로 업데이트 할 수 있다.

 

브라우저가 다음 페이지에 대한 완전히 새로운 HTML을 요청하거나CSS 및 JavaScript를 다시 받아올 필요가 없기 때문에 더 빠른 사용자 경험을 제공한다. 또한 애니메이션과 같은 작업에서 보다 역동적인 사용자 경험을 제공한다.

 

Client Side Routing은 라우터(Router)를 생성하고, Link 컴포넌트나 <Form>을 사용해 페이지 간 이동을 구현한다

 

[출처] React Router 공식문서

 

 

 

 

여기서 먼저 라우팅(Routing)에 대한 개념을 잠깐 짚고 넘어가자

Routing이란

라우팅(Routing)은 사용자가 웹 애플리케이션에서 특정 URL을 입력하거나 클릭했을 때, 그 URL에 해당하는 페이지나 콘텐츠를 제공하는 방식이다. 즉, 어떤 URL에 대해 어떤 화면을 보여줄지 결정하는 과정

 

웹 개발에서는 크게 두 가지 방식의 라우팅이 있다.

 

✔️ Server-Side Routing

• 전통적인 방식으로, 사용자가 새로운 URL로 이동할 때마다 서버에 요청을 보내고 서버가 그에 맞는 HTML 페이지를 보내준다
• 매번 서버와의 통신이 필요하기 때문에 페이지가 새로고침된다
• 예: 사용자가 www.example.com/about을 입력하면 서버가 /about 페이지에 맞는 HTML을 보내준다

 

✔️ Client-Side Routing

• 단일 페이지 애플리케이션(SPA)에서 주로 사용되는 방식으로, 서버에 여러 번 요청을 보내지 않고, 한 번 불러온 페이지 내에서 자바스크립트를 사용해 화면을 동적으로 전환
• 페이지가 새로고침되지 않으며, 빠르게 콘텐츠를 전환할 수 있다
• 예: React, Vue, Angular 같은 프레임워크에서는 react-router 같은 라이브러리로 클라이언트 사이드 라우팅을 구현

 

 

 

즉, React Router는 React 애플리케이션에서 Client-Side Routing을 구현하기 위해 사용하는 라이브러리이다.

 

 

---

 

React Router 사용하기!

 

1. react-router 설치하기

npm

# React Router 설치
npm install react-router-dom

# 최신 버전의 React Router 설치
npm install react-router-dom@latest

 

yarn

# React Router 설치
yarn add react-router-dom

# 최신 버전의 React Router 설치
yarn add react-router-dom@latest

 

설치가 완료되면, package.json 파일을 열어 react-router-dom 항목이 추가되었는지 확인한다.

예시)

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.x.x" // 최신 버전이 여기에 표시됩니다.
}

 

 

2. React Router 기본 설정

공식문서나 블로그에 다양한 기본 설정 방법이 나와있지만 여기서는 내가 개인적으로 사용하는 방법을 올리려 한다.

 

1. App.jsx를 감싸는 main.jsx파일 만들기

 

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom';

import App from './App.jsx'

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

 

<App> 컴포넌트를 Reat.StrictMode와 BrowserRouter로 감싸주는 main.jsx 파일을 만들어준다음

 

App.jsx

import ThemeProvider from "./theme/ThemeProvider.jsx";
import Router from "./routes/Router.jsx";

function App() {
  return (
    <ThemeProvider>
      <Router/>
    </ThemeProvider>
  )
}

export default App

 

<ThemeProvider>는 테마 변경을 위해 만들어둔 Context이기 때문에 신경쓰지 말고 App컴포넌트에는 Router 컴포넌트만 두면 된다.

👉🏻 Context에 대해 알고싶다면

 

 

2. routes 폴더를 만들고 그 안에 Router.jsx 파일 생성하기

 

Router.jsx

import {useRoutes} from "react-router-dom";
import HomePage from "../pages/HomePage.jsx";
import MainLayout from "../layouts/MainLayout/index.jsx";
import StorePage from "../pages/StorePage.jsx";
import ReviewPage from "../pages/review/ReviewPage.jsx";

export default function Router() {
  return useRoutes([
    {
      path: '/',
      element: <MainLayout/>,
      children: [
        { index: true, element: <HomePage/> },
        { path: 'store', element: <StorePage />},
        { path: 'review', element: <ReviewPage />}
      ],
    },
  ])
}

 

<MainLayout/>

<HomePage/>

<StorePage/>

<ReviewPage/>

 

는 모두 내가 만들어둔 컴포넌트들이며 각각의 페이지를 나타낸다.

여기서 <MainLayout/> 은 변하지 않는 뼈대 역할을 하며 children으로 있는 각각의 페이지들만 변경된다.

<HomePage/>는 가장 기본으로 보여지는 페이지이기 때문에 path가 아닌 index 속성을 적용한다.

 

그 외의 나머지 컴포넌트들에는 path: 'store', path: 'review'와 같은 path 속성이 붙어있는데

이는 url www.example/store 와 같이 url에 따른 페이지 변경을 보여주게 된다.

 

 

MainLayout.jsx

import Header from "./header";
import Sidebar from "./sidebar";
import {Outlet} from "react-router-dom";

export default function MainLayout(){

    return(
        <div>
            <Header/>
            <Sidebar/>
            <Outlet/>
        </div>
    )
}

 

 

이 때, <HomePage/>와 같은 페이지를 보여주기 위해서는 <Outlet/>을 반드시 사용해야 한다.