[React다루는기술] 15. React 파라미터와 쿼리스트링(useParams, useSearchParams)

in React on React 다루는 기술


리액트에서 화면 라우팅간에 파라미터와 쿼리스트링을 useParams와 useSearchParams Hook 을 설명하는 포스팅이다.


1. useParams

useParams는 react-router-dom 라이브러리에서 제공되는 React Hook 하나로, React Router의 동적 라우팅에서 URL 매개변수를 가져오는 데 사용됩니다.

React Router를 사용하면 동적으로 변경되는 URL에 대응하여 특정 컴포넌트를 렌더링할 수 있습니다. 이때 URL의 일부로 전달되는 매개변수를 가져오기 위해 useParams 훅을 사용한다.

아래와 같이 쿼리스트링 방식이 아닌 rest-api 형태(?)의 uri로 params를 받는다.

'/detail/1'


App.js

  return (
    <div style={wrapper}>
      <Routes>
        <Route path="/" element={<List />} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </div>
  );


List.js

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

const devHistorys = [
  {
    id: 1,
    title: "신한은행 차세대 프로젝트",
    year: "2021~2022",
  },
  {
    id: 2,
    title: "저축은행 차세대 프로젝트",
    year: "2023~2023",
  },
  {
    id: 3,
    title: "IBK 프로젝트",
    year: "2024~2024",
  },
  {
    id: 4,
    title: "XX증권 차세대 프로젝트",
    year: "2025~2025",
  },
];

const List = () => {
  return (
    <div>
      <h1>목록</h1>
      <p>목록 페이지입니다.</p>
      <ul>
        {devHistorys.map((devItem, index) => (
          <li>
            <Link to={`/detail/${devItem.id}`}>
              [{devItem.id}] {devItem.title}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default List;


Detail.js

import { useState } from "react";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";

const selectDBdevHistorys = [
  {
    id: 1,
    title: "신한은행 차세대 프로젝트",
    year: "2021~2022",
  },
  {
    id: 2,
    title: "저축은행 차세대 프로젝트",
    year: "2023~2023",
  },
  {
    id: 3,
    title: "IBK 프로젝트",
    year: "2024~2024",
  },
  {
    id: 4,
    title: "XX증권 차세대 프로젝트",
    year: "2025~2025",
  },
];

const Detail = () => {
  const params = useParams();

  let id = parseInt(params.id, 0);

  //let devHistory = selectDBdevHistorys.filter((item) => item.id === id)[0];
  let devHistory = selectDBdevHistorys.find((item) => item.id === id);
  // setDevItem(devHistory);

  return (
    <div>
      <h1>프로젝트 정보</h1>
      <p>프로젝트명 : {devHistory.title}</p>
      <p>개발 기간 : {devHistory.year}</p>
      <br />
      <Link to="/List">목록으로</Link>
    </div>
  );
};

export default Detail;


Detail.js (useState 사용)

useState Hook을 사용하기 위해 useEffect Hook과 같이 사용한 예제이다.

import React, { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";

const selectDBdevHistorys = [
  {
    id: 1,
    title: "신한은행 차세대 프로젝트",
    year: "2021~2022",
  },
  {
    id: 2,
    title: "저축은행 차세대 프로젝트",
    year: "2023~2023",
  },
  {
    id: 3,
    title: "IBK 프로젝트",
    year: "2024~2024",
  },
  {
    id: 4,
    title: "XX증권 차세대 프로젝트",
    year: "2025~2025",
  },
];

const Detail = () => {
  const params = useParams();
  const [devItem, setDevItem] = useState(null);

  let id = parseInt(params.id, 0);

  useEffect(() => {
    let foundDevHistory = selectDBdevHistorys.find((item) => item.id === id);
    setDevItem(foundDevHistory);
  }, [id]);///id가 변경 될때만 effect 리렌더링

  return (
    <div>
      <h1>프로젝트 정보</h1>
      {devItem ? (
        <>
          <p>프로젝트명 : {devItem.title}</p>
          <p>개발 기간 : {devItem.year}</p>
        </>
      ) : (
        <p>프로젝트를 찾을 수 없습니다.</p>
      )}
      <br />
      <Link to="/List">목록으로</Link>
    </div>
  );
};

export default Detail;

useEffect 훅이 컴포넌트가 마운트되거나 id 매개변수가 변경될 때 프로젝트 세부 정보를 가져와 업데이트하는 데 사용했다.


2. useSearchParams

라우트에서 쿼리스트링을 사용하는 방법이다. URL파라미터와 달리 Route 컴포넌트를 사용할 때 별도로 설정해야 하는 것은 없다.

  • useLocation Hook은 react-router-dom 라이브러리에서 제공되는 React 훅 중 하나로, 현재 URL의 정보를 가져오는 데 사용됩니다. 이 훅을 사용하면 컴포넌트에서 현재 URL의 경로, 쿼리 매개변수 및 기타 관련 정보에 액세스할 수 있습니다.

  • useSearchParams Hook으로 현재 URL의 검색 매개변수를 가져올 수 있다.


Search.js

import React from "react";
import { Link, useLocation, useSearchParams } from "react-router-dom";

const Search = () => {
  const location = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();

  let id = searchParams.get("id");
  let title = searchParams.get("title");

  return (
    <div>
      <h1>프로젝트 정보</h1>
      <p>QueryString : {location.search}</p>
      <p>param id : {id}</p>
      <p>param title : {title}</p>
      <br />
      <Link to="/List">목록으로</Link>
    </div>
  );
};

export default Search;