[React] React Router v6

코드스테이츠 과정에서 배운 React Router는 v5이라 프로젝트 진행 당시 v6에 많은 변경사항이 있는 것을 확인하지 못해 퍼스트 프로젝트 당시 가독성도 엉망이고 라우팅 처리를 제대로 하지 못했다. 하지만 파이널 프로젝트는 v6의 많은 변경 사항을 확인하고 다시 학습해 나름대로 만족한 라우팅을 했다고 생각한다.

라이브러리 설치

npm install react-router-dom

라우터 적용

react-router-dom 에 내장되어 있는 BrowserRouter 컴포넌트를 사용해 프로젝트를 감싸면 App 컴포넌트는 페이지를 라우팅할 수 있게 됩니다.

index.js

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

라우트 설정

Route 컴포넌트를 사용해 라우트 설정을 합니다.

브라우저 주소 경로에 따라 원하는 컴포넌트를 보여주기 위해 path 속성에 주소 경로, element 속성에 원하는 컴포넌트를 넣어줍니다.

<Route path="주소" element={컴포넌트} />

Route 컴포넌트는 Routes 컴포넌트 내부에서 사용되어야 하고. Route 컴포넌트의 자식 컴포넌트로는 Route 컴포넌트만 사용할 수 있습니다.

App.js

import { Route, Routes } from 'react-router-dom';
import LayoutWithHeader from './pages/desktop/LayoutWithHeader';
import LandingPage from './pages/desktop/LandingPage';
import Ranking from './pages/desktop/Ranking';
import MyPage from './pages/desktop/MyPage';
import LogIn from './pages/desktop/Login';
import SignUp from './pages/desktop/SignUp';

const App = () => {
  return (
    <Routes>
      <Route element={<LayoutWithHeader />}>
        <Route path="/" element={<LandingPage />} />
        <Route path="/ranking" element={<Ranking />} />
        <Route path="/mypage" element={<MyPage />} />
      </Route>

      <Route path="/login" element={<LogIn />} />
      <Route path="/signup" element={<SignUp />} />
    </Routes>
  );
};

export default App;

이 때 중첩된 라우트는 공통 레이아웃 컴포넌트인 LayoutWithHeader에서 Outlet 컴포넌트를 사용해 Route의 자식컴포넌트를 보여줄 수 있습니다.

LayoutWithHeader.js

import React from 'react';
import { Outlet } from 'react-router';
import Header from '../../components/desktop/Header';
import Footer from '../../components/desktop/Footer';

const LayoutWithHeader = () => {
  return (
    <>
      <Header />
        <main>
          <Outlet />
        </main>
      <Footer />
    </>
  );
};

export default LayoutWithHeader;

Link, useNavigate, useLocation

Link는 다른 페이지로 이동하는 링크 컴포넌트입니다. Link 컴포넌트는 a 태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저의 경로만 바꾸는 기능이 있습니다.

<Link to="경로">링크 이름</Link>

useNavigate는 Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 상황에 사용하는 Hook 입니다.

const navigate = useNavigate();

const singOut = () => {
  navigate('/');
}

useLocation은 현재 사용자가 보고있는 페이지의 정보를 가지고 있습니다.

const location = useLocation();

// {
  pathname: 현재 주소의 경로 (쿼리스트링 제외),
  search: 맨 앞의 ? 문자 포함한 쿼리스트링 값,
  hash: 주소의 # 문자열 뒤의 값,
  state: 페이지로 이동할때 임의로 넣을 수 있는 상태 값,
  key: location 객체의 고유 값, 초기에는 default 이며 페이지가 변경될때마다 고유의 값이 생성됨
}

---

참고자료

react-router-v6-tutorial
https://velog.io/@velopert/react-router-v6-tutorial