미니블로그 - 경로 구성하기

2023.02.07 미니블로그 각 페이지별 경로 구성하기

지금까지 미니 블로그에 필요한 모든 페이지 컴포넌트를 구현했습니다.
이제 페이지 컴포넌트들을 실제 웹브라우저에서 보이도록 각 경로에 맞게 매핑해주는
작업이 필요합니다.

리액트에서는 react-router-dom이라는 패키지를 이용해서 각 경로에 따라 다른컴포넌트를 보여주도록 만듭니다.

react-router-dom

react-router-dom은 리액트를 위한 라우팅 라이브러리입니다.
웹사이트에서 라우팅이라고 하면 사용자가 원하는 경로로 보내는 과정이라고 이해하면 됩니다.

react-router-dom를 이용해 라우팅을 구성하기 위해서 사용하는 기본적인 컴포넌트는
BrowserRouter, Routes, Route 이렇게 세가지 입니다.

BrowserRouter 컴포넌트는 웹브라우저에서 reac-router를 사용하여 라우팅을 할 수 있도록 해주는 컴포넌트입니다.
웹브라우저에는 history라는 기능이 내장되어 있는데 여기에는 사용자가 탐색한 페이지들의 방문 기록이 저장됩니다.
그래서 웹브라우저의 '뒤로가기' 버튼을 누르면 이 history를 이용해서 이전 페이지가 어디인지 찾고 해당 페이지로 이동하게 되는 것입니다.
BrowserRouter 컴포넌트는 이 hisoty를 이용해서 경로를 탐색할 수 있게 해주는 컴포넌트입니다.

그리고 Routes와 Route 컴포넌트는 실제로 라우팅 경로를 구성할 수 있게 해주는 컴포넌트 입니다.
Routes 컴포넌트는 뒤에 s가 붙어서 복수를 나타내는 것처럼 여러 개의 Route 컴포넌트를 children으로 가집니다.
Route 컴포넌트는 Routes 컴포넌트의 하위 컴포넌트로써 path와 element라는 props를 갖고 있습니다.
여기에서 path는 경로를 의미하고 element는 경로가 일치할 경우 렌더링을 할 리액트 엘리먼트를 의미합니다. 사용자가 주소창에 새로운 경로를 입력하거나 웹사이트 내에서 경로 이동이 이어나게 되면 Routes 컴포넌트는 하위 chiledren으로 갖고 있는 Route 컴포넌트 중에서 현재 경로와 가장 일치하는 경로를 찾아 해당되는 엘리먼트를 반호나하게 됩니다.
그러고 나면 사용자에게 보이는 화면이 바뀌게 되는 것이죠.

---

예제 코드를 봅시다.
만약 경로 값이 없이 그냥 사이트 메인으로 접속하게 되면 index라는 prop을 가진 Route로 라우팅 됩니다.
여기에서는 MainPage 컴포넌트가 렌더링되어 보이게 됩니다.

또한 /palces로 접속하면 PlacePage 컴포넌트가,
/games로 접속하면 GamePage 컴포넌트가 렌더링되어 화면에 나오게 됩니다.

import { BrowserRouter } from "react-router-dom";

<BrowserRouter>
    <Routes>
        <Route index element={<MainPage />} />
        <Route path="places" element={<PlacePage />} />
        <Route path="games" element={<GamePage />} />        
    </Routes>
</BrowserRouter>