Page routing

1. (기본 설정)

   • react-router-dom의 기능을 사용하려는 모든 컴포넌트들은 이 컴포넌트 내부에 있어야 합니다.
   • 보통 애플리케이션의 최상위 (예: index.js 또는 App.js의 최상단)에서 앱 전체를 감싸는 형태로 사용합니다. HTML5 History API를 사용하여 URL과 UI를 동기화합니다.

2. • 여러 개의 컴포넌트를 감싸는 컨테이너 역할을 합니다.
   • 현재 브라우저의 URL 경로를 보고, 자식 컴포넌트들 중에서 경로가 일치하는 첫 번째 의 element를 렌더링합니다. (v5의 와 유사한 역할)

3. • 특정 URL 경로(path)와 해당 경로에서 보여줄 React 컴포넌트(element)를 연결(매핑)하는 역할을 합니다.
   • 주요 Props:
     • path: 매칭시킬 URL 경로 문자열 (예: /, /about, /users/:userId).
       • :를 사용하면 동적 파라미터(dynamic parameter)를 정의할 수 있습니다 (예: :userId). 이 부분은 URL마다 다른 값을 가질 수 있습니다.
     • element: path가 현재 URL과 일치할 때 렌더링할 React 엘리먼트 (컴포넌트 인스턴스) (예: element={}).

4. • HTML의 태그와 유사하게, 클릭 시 다른 경로로 이동할 수 있는 링크를 만듭니다.
   • 중요한 차이점: 태그처럼 페이지 전체를 새로고침하는 것이 아니라, History API를 통해 클라이언트 사이드에서 주소만 변경하고 해당 경로에 맞는 컴포넌트를 렌더링합니다.
   • 주요 Props:
     • to: 이동할 목표 경로 문자열 (예: to="/about").

5. useParams

   • 의 path에 정의된 동적 파라미터 값들을 가져오기 위한 훅(Hook)입니다.
   • 이 훅은 해당 동적 파라미터를 포함하는 에 의해 렌더링된 컴포넌트 내부에서만 사용할 수 있습니다.
   • URL 경로에서 추출된 파라미터들을 key-value 쌍으로 갖는 객체를 반환합니다.
   • 예: path="/users/:userId"인 라우트 내부 컴포넌트에서 const { userId } = useParams(); 와 같이 사용하면, URL이 /users/123일 때 userId 변수에 '123' 문자열이 할당됩니다.

6. useSearchParams

   • URL의 쿼리 스트링(Query String) 값을 읽고 수정하기 위한 훅입니다. 쿼리 스트링은 URL에서 ? 뒤에 나오는 key=value 쌍들을 의미합니다 (예: /search?keyword=react&page=2).
   • 이 훅은 배열을 반환하며, 배열의 첫 번째 요소는 현재 쿼리 파라미터를 읽을 수 있는 URLSearchParams 객체이고, 두 번째 요소는 쿼리 파라미터를 업데이트하는 함수(setSearchParams)입니다.
   • 예:

   JavaScript

   import { useSearchParams } from 'react-router-dom';
   
   function SearchPage() {
     const [searchParams, setSearchParams] = useSearchParams();
     const keyword = searchParams.get('keyword'); // 'keyword' 파라미터 값 읽기
     const page = searchParams.get('page'); // 'page' 파라미터 값 읽기
   
     const goToNextPage = () => {
       // 기존 파라미터 유지하며 'page'만 업데이트
       setSearchParams({ keyword: keyword || '', page: page ? parseInt(page) + 1 : 2 });
     };
     // ...
   }

간단한 예시:

JavaScript

// App.js
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import UserProfile from './pages/UserProfile';
import SearchPage from './pages/SearchPage';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link> |{' '}
        <Link to="/users/john_doe">John's Profile</Link> |{' '}
        <Link to="/search?keyword=routing">Search Routing</Link>
      </nav>

      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/users/:userId" element={<UserProfile />} /> {/* 동적 라우트 */}
        <Route path="/search" element={<SearchPage />} /> {/* 쿼리 파라미터 사용 라우트 */}
        {/* 다른 라우트들... */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

// pages/UserProfile.js
import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams(); // URL에서 userId 파라미터 추출
  return <h2>User Profile: {userId}</h2>;
}

export default UserProfile;

// pages/SearchPage.js
import React from 'react';
import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams] = useSearchParams();
  const keyword = searchParams.get('keyword'); // URL에서 keyword 쿼리 파라미터 추출
  return <h2>Search Results for: {keyword}</h2>;
}

export default SearchPage;