리액트는 인기 있는 자바스크립트 라이브러리로, 싱글 페이지 애플리케이션을 개발하는 데 사용됩니다. 리액트 라우터는 리액트 애플리케이션의 라우팅을 관리하는 도구입니다. 라우팅은 사용자가 웹 애플리케이션에서 다른 페이지로 이동할 수 있도록 하는 것을 의미합니다.

리액트 라우터를 사용하면 URL 파라미터와 쿼리 스트링을 사용하여 동적으로 페이지를 생성할 수 있습니다. URL 파라미터는 경로에 포함된 변수이며, 쿼리 스트링은 URL에 추가된 키-값 쌍입니다.

URL 파라미터

URL 파라미터를 사용하려면, 라우트 정의에 콜론 (:)을 사용하여 변수를 정의해야 합니다. 예를 들어, /users/:id 경로는 /users/1과 같은 URL에 일치합니다. 이 경우 id는 변수로 취급되어 컴포넌트에서 접근할 수 있습니다.

리액트에서 URL 파라미터에 접근하려면, useParams 훅을 사용할 수 있습니다. 다음은 URL 파라미터를 사용하는 예입니다.

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

function UserDetail() {
  const { id } = useParams();
  
  return (
    <div>
      <h1>User Detail</h1>
      <p>User ID: {id}</p>
    </div>
  );
}

위의 코드에서 useParams 훅을 사용하여 id 변수에 접근하고 있습니다. 이제 /users/1과 같은 URL을 사용할 때 해당 ID를 표시합니다.

쿼리 스트링

쿼리 스트링을 사용하면 URL에 데이터를 추가할 수 있습니다. 일반적으로 ? 다음에 키-값 쌍을 추가하는 형식으로 사용됩니다. 예를 들어, /search?q=react&page=1은 q와 page이라는 두 개의 쿼리 파라미터와 함께 작동하는 검색 페이지입니다.

리액트에서 쿼리 스트링에 접근하려면, useLocation 훅을 사용하여 현재 URL의 쿼리 정보를 가져올 수 있습니다. 아래의 예제에서는 urlSearchParams를 사용하여 쿼리 스트링을 객체로 변환하는 역할을 합니다.

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

function SearchResults() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  
  return (
    <div>
      <h1>Search Results</h1>
      <p>Query: {queryParams.get('q')}</p>
      <p>Page: {queryParams.get('page')}</p>
    </div>
  );
}

위의 코드에서 useLocation 훅을 사용하여 현재 URL을 구성하고, URLSearchParams를 사용하여 쿼리 스트링을 가져옵니다. 그런 다음 get 메소드를 사용하여 특정 쿼리 파라미터의 값을 가져옵니다.

결론

리액트 라우터를 사용하면 URL 파라미터와 쿼리 스트링을 활용하여 동적인 페이지를 구성할 수 있습니다. URL 파라미터를 사용하여 경로 내의 변수를 읽고, 쿼리 스트링을 사용하여 추가적인 데이터를 전달할 수 있습니다. 이를 통해 사용자에게 더 나은 사용자 경험을 제공할 수 있고, 애플리케이션에서 유연하고 동적인 콘텐츠를 구현할 수 있습니다.