[React] react-router-dom을 알아보기

 

 

react-router-dom

웹 애플리케이션에서 라우팅을 관리하기 위한 React 라이브러리로 URL을 통해 특정 페이지나 뷰에 앳세스할 수 있게 해주는 기능입니다.

 

기본 설정

// test라는 이름의 react 프로젝트를 만듬
npx react-create-app test
// react-router-dom 설치
npm install react-router-dom

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
// react-router-dom에서 BrowserRouter를 구조분해 할당
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  // BrowserRouter로 App을 감싸주어야 모든 파일에 route 설정 적용
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

reportWebVitals();

 

Routes와 Route

Routes는 다수의 Route 컴포넌트를 감싸는 역할을 하며 Route는 특정 URL 경로에 어떤 컴포넌트를 렌더링할지 정의합니다.

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  );
}

 

Link

페이지 간의 이동을 위한 링크로 A 태그와 같은 동작을 수행합니다.

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

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

 

Navigate

리디렉션을 수행하기 위한 컴포넌트로 렌더링 시점에서 자동으로 특정 경로로 리디렉션할때 사용됩니다.

예를 들어 로그인안된 사용자가 특정 페이지에 접근하지 못하도록 하게 하는 등 특정 조건을 충족하지 않을 경우 다른 페이지로 리디렉션 시킬 수 있습니다.

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

if (!userLogIn) {
  return <Navigate to="/" />;
}

 

useNavigate

이 함수는 이벤트 핸들러 내부나 특정 로직의 결과에 따라 동적으로 네비게이션을 수행하는 경우에 사용되며 버튼을 누르는 등 이벤트가 발생하게 되면 다른 페이지로 이동하게 하는 기능을 수행합니다.

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

function test() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/home')}>Home</button>
  );
}

 

useLocation

현재 페이지의 URL 정보를 제공하며 다음과 같은 속성을 가집니다.

 

pathname : 현재 URL의 경로 부분을 문자열로 반환합니다.

search : 쿼리 문자열을 포함한 문자열을 반환합니다. ex) ?id=test&age=30

hash : URL의 해시 부분을 반환합니다.

state : Link나 Navigate 컴포넌트를 통해 전달된 상태를 반환합니다. 이는 라우트 간에 추가 정보를 전달하는데 유용합니다.

 

다른 페이지에서 데이터 전달

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

function HomePage() {
  return (
    <Link 
      to={{
        pathname: "/home",
        state: { fromHomePage: true }
      }}
    >
      home
    </Link>
  );
}

 

데이터를 전달 받는 페이지

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

function DetailsPage() {
  const location = useLocation();
  // 넘어온 fromHomePage를 구조 분해 할당
  const { fromHomePage } = location.state || {};

  return (
    <div>
      {/* 넘어온 fromHomePage는 true이기 때문에 <p>home page!</p> 출력 */}
      {fromHomePage ? <p>home page!</p> : <p>Not Home Page!</p>}
    </div>
  );
}

 

useParams

현재 페이지의 URL을 매개변수로 받아옵니다.

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

function getPostId () {
  const { postId } = useParams();

  return <div>Post ID: {postId}</div>;
}
// URL: /post/123 에서, postId "123"

 

useSearchParams

현재 URL의 쿼리 문자열에 접근하고 조작합니다.

개인적으로는 사용도가 떨어져 어떤 경우에 쓰이는지 찾아보니 아래와 같은 경우에 사용합니다.

 

검색 기능 : 검색어를 쿼리 문자열로 URL에 추가 하고자 할때 유용합니다. 

필터링 및 정렬 : 상품 목록, 기사 목록 등을 보여줄 때 사용자가 선택한 필터나 정렬 옵션을 URL의 쿼리 문자열로 저장하면 나중에 동일한 상태로 페이지를 로드할 수 있습니다.

페이지네이션 : 현제 페이지 번호를 쿼리 문자열로 저장하여 사용자가 특정 페이지에 직접 접근할 수 있습니다.

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

function SearchPage() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get("query");

  return <div>Search Query: {query}</div>;
}
// URL: /search?query=react 에서, query는 "react"