리액트 기본 페이지 라우팅

인프런 파이어베이스 강의를 듣고 기억하고 싶은 내용만 일부 정리했습니다. 파이어베이스 강의지만 리액트 기반으로 진행해 리액트 관련 개념도 배울 수 있습니다.

리액트 페이지 라우팅에 관한 BrowserRouter, Route, Routes 개념 설명입니다.

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import Home from './pages/home/Home'
import Login from './pages/login/Login'
import Signup from './pages/signup/Signup'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/signup" element={<Signup />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App

BrowserRouter

UI 와 URL 을 연결해주는 역할을 합니다. 서버사이드 렌더링 처럼 URL 을 사용할 수 있게 합니다. 서버사이드 렌더링은 주소창에 www.naver.com 을 쳐서 네이버에 접속하는 것처럼 네이버란 회사의 서버에 저장된 네이버 메인 페이지의 경로로 이동하는 것과 같습니다. 이때 naver/com/login 이라고 한다면 root 에서 login 이라는 폴더안에 있는 특정 html 파일을 불러온다고 볼 수 있습니다. 서버사이드 렌더링은 서버 컴퓨터에 있는 폴더 구조에 따라 우리가 원하는 html 파일을 불러오는 것입니다. 리액트와 같은 SPA 는 한 화면에서 모든 것을 처리하므로 서버사이드 렌더링 처럼 폴더구조로 탐색하는 것은 아니지만 BrowserRouter 를 사용하면 서버사이드 렌더링 처럼 url 을 이용할 수 있습니다.

Route

현재 URL과 매칭된 UI 를 렌더링 합니다. path 속성으로 URL 주소를 설정할 수 있고, 해당 URL 로 어떤 컴포넌트를 불러올지 element 속성으로 지정할 수 있습니다.

Routes

URL 이 변경되면 모든 자식 Route 를 살펴보고 가장 알맞은 것을 매칭합니다.