리액트에서 쿼리스트링 사용하기

Posted Mar 12, 2024 Updated Mar 13, 2024

By hyemin 12 min read

✨리액트에서 쿼리스트링 사용하기

1. `useParams`

현재 URL의 동적 경로를 반환하는 react-router-dom의 hook입니다. Route에서 :id와 같이 동적으로 설정된 path를 찾을 때 사용한다. 여러 개의 동적 경로를 추출할 수도 있습니다.

💡예시

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

function ProfilePage() {
  const { userId } = useParams();
  return <div>user id: {userId}</div>;
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
      </Route>
    </Routes>
  );
}

위의 코드는 root 경로에서 /users/:userId로 진입했을 때 동적 path를 가진다. 즉, http://localhost:3000/users/1231로 접근을 한다면 화면에 “user id: 1231”이 출력된다.

💡예시2

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

function ProductDetails() {
  const { category, productId } = useParams();
  return (
    <div>
      <h2>Category: {category}</h2>
      <h3>Product ID: {productId}</h3>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="products">
        <Route path=":category/:productId" element={<ProductDetails />} />
      </Route>
    </Routes>
  );
}

위의 코드는 root 경로에서 /products/:category/:productId로 진입했을 때 category와 productId, 2개의 동적 path를 가진다. 즉, http://localhost:3000/products/electronics/123로 접근을 한다면 화면에 “Category: electronics”와 “Product ID: 123”이 출력된다.

2. `useLocation`

공식문서

현재 URL의 정보를 반환하는 react-router-dom의 hook입니다. 다음과 같은 속성들을 가지고 있습니다.

■ 속성

location.hash: 현재 URL의 해시 값 (해시 라우터에서 사용)
location.key: 고유한 키 값, 페이지가 변경될 때마다 고유 값이 생성됨
location.pathname: 현재 URL의 경로
location.search: 현재 URL의 쿼리 문자열
location.state: 위치의 상태 값 (react-router-dom의 Link태그나 navigate에 의해 전달된 상태 값)

💡예시

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

function Navbar() {
  const location = useLocation();

  useEffect(() => {
    console.log("현재 URL 경로: ", location.pathname);
  }, [location]);

  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

위의 코드는 useLocation을 사용하여 현재 URL의 정보를 가져오고, useEffect를 사용하여 페이지가 이동될 때마다 콘솔창에 URL 경로를 출력하는 코드입니다. 각 페이지로 이동했을 때 출력되는 결과물은 다음과 같습니다.

Home 페이지로 이동 → “현재 URL 경로: /” 출력
About 페이지로 이동 → “현재 URL 경로: /about” 출력
Contact 페이지로 이동 → “현재 URL 경로: /contact” 출력

💡예시2

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

// Link 태그에 state로 상태값 전달
function App() {
  return (
    <div>
      <Link to="/about" state=>
        Go to About
      </Link>
    </div>
  );
}

// useLocation으로 state값 추출
function About() {
  const location = useLocation();
  const { user } = location.state;

  return (
    <div>
      <h4>사용자 정보 {user}</h4>
    </div>
  );
}

위의 코드는 App 컴포넌트에서 Link태그를 사용하여 state값을 전달하고 있고, About컴포넌트에서 useLocation을 사용하여 state값을 추출하여 사용하고 있습니다.

3. `useSearchParams`

공식문서

현재 위치의 쿼리 문자열을 읽고 수정하는데 사용하는 react-router-dom의 hook입니다. useState와 같이 두 가지 값의 배열을 반환합니다.

  
const [searchParams, setSearchParams] = useSearchParams();

searchParams: 현재 쿼리 문자열 정보 반환
setSearchParams: 쿼리 문자열을 수정할 때 사용

※ 쿼리 문자열?

웹페이지 URL에서 ?로 시작하는 부분이며, 키=값의 형태로 이루어져있습니다. 첫번째 쿼리 문자열은 ?로 시작하며 이후 쿼리 문자열은 &를 사용하여 나열합니다.
주로 검색어, 필터, 페이지 번호와 같은 데이터를 서버로 전송하거나, 클라이언트에서 문자열을 읽어와 동적으로 콘텐츠를 생성할 때 사용합니다.

https://example.com/search?q=react+router&lang=en&page=1

다음과 같은 URL에서 쿼리 문자열은 q=react+router&lang=en&page=1 부분이며, 3개로 이루어져있습니다.

q=react+router: 검색어가 react router로 설정
lang=en: 언어가 영어로 설정
page=1: 페이지가 1로 설정

💡예시

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

function App() {
  let [searchParams, setSearchParams] = useSearchParams();

  function handleSubmit(event) {
    event.preventDefault();
    // serialize 함수는 폼의 필드에서 { key: value } 쌍의 객체를 생성합니다.
    const params = serializeFormQuery(event.target);
    setSearchParams(params);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>{/* ... */}</form>
    </div>
  );
}

4. `URLSearchParams`

공식문서

자바스크립트에서 제공하는 내장 API입니다. new 생성자를 사용하여 새로운 인스턴스를 생성할 수도 있으며, 여러 형태의 값을 인자로 받을 수 있습니다.

💻인자 넣는 방법

2차원 배열

  
new URLSearchParamas([
  ["query", "params"],
  ["page", 1],
  ["sort", "desc"]
]);

쿼리 문자열 형태

  
new URLSearchParams("?query=params&page=1&sort=desc");

// 맨 앞 ? 기호는 생략 가능
new URLSearchParams("query=params&page=1&sort=desc");

💻새로운 파라미터 추가하기

1. `append`

새로운 파라미터(키=값)을 추가할 때 사용합니다.

  
const params = new URLSearchParams();
params.append("query", "params");
params.append("page", 1);
params.append("sort", "desc");
params.toString(); // 파라미터를 문자열로 만들기

// "?query=params&page=1&sort=desc"

2. `set`

새로운 파라미터(키=값)을 추가할 때 사용합니다. append와는 다르게 기존 값을 지우고 새로운 값을 추가합니다.

  
const params = new URLSearchParams();
params.set("query", "params");
params.set("page", 1);
params.set("page", 12);
params.set("sort", "desc");
params.toString(); // 파라미터를 문자열로 만들기

// "?query=params&page=12&sort=desc"

예시 코드를 확인해보면 중복되는 key인 page가 덮어씌어진 것을 확인할 수 있습니다.

💻쿼리 문자열 키의 값 추출하기

1. `get`

쿼리 문자열의 정보를 확인할 때 사용합니다. get은 첫번째 값만 문자 형태로 반환합니다.

  
// params = "?query=params&page=1&page=12&sort=desc"
params.get("query"); // 'params'
params.get("page"); // '1'

2. `getAll`

get과는 다르게 특정 key에 대한 모든 값을 배열 형태로 반환합니다.

  
// params = "?query=params&page=1&page=12&sort=desc"
params.getAll("query"); // ['params']
params.getAll("page"); // ['1','12']

💻쿼리 문자열 삭제하기

delete메소드를 사용하면 됩니다. 해당 key의 모든 값이 삭제됩니다.

  
// params = "?query=params&page=1&page=12&sort=desc"
params.delete("page"); // "?query=params&sort=desc"

💻특정 문자열이 들어있는지 확인하기

has 메소드를 사용하면 됩니다. 특정 파라미터(key 값)이 존재하는지 확인할 때 사용합니다.

  
// params = "?query=params&page=1&page=12&sort=desc"
params.has("query"); // true
params.has("limit"); // false

🔍리액트에서 useSearchParams 훅을 사용할 때 URLSearchParams도 같이 사용해서 쿼리 문자열을 조작하는 이유?

react-router-dom의 useSearchParams를 사용하면 setSearchParams 통해 쿼리 문자열을 변경할 수 있습니다. 하지만 불변성을 유지하기 위해 URLSearchParams 와 같이 사용됩니다.

참조값을 저장하고 있는 상태 변수를 직접 변경하는 것은 사이드 이팩트를 발생시킬 수 있으며, 리액트에서는 상태 변수의 불변성을 유지하는 것을 권장하고 있습니다.
따라, useSearchParams의 setSearchParams을 사용하여 searchParams값을 직접 변경하지 않고 URLSearchParams를 사용하여 새로운 객체를 생성한 다음 새롭게 생성된 객체를 조작하고 난 뒤 setSearchParams에 담아 업데이트하는 방식으로 쿼리 문자열을 조작합니다.

💡예시

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

function App() {
  const [searchParams, setSearchParams] = useSearchParams();

  useEffect(() => {
    // URLSearchParams를 사용하여 새로운 객체를 생성
    const params = new URLSearchParams(searchParams);

    // 새로운 검색 매개변수 설정
    params.set("page", "2");

    // setSearchParams를 통해 새로운 검색 매개변수로 업데이트
    setSearchParams(params.toString());
  }, [searchParams, setSearchParams]);

  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

useSearchParams를 사용하여 현재 URL의 쿼리 문자열 정보를 가져옵니다.
new URLSearchParams(searchParams)를 사용하여 현재 쿼리 문자열을 복사한 새로운 객체를 생성합니다.
set메소드를 사용하여 쿼리 문자열을 설정합니다.
useSearchParams의 setSearchParams를 사용하여 쿼리 문자열을 업데이트합니다.

프레임워크, 리액트

This post is licensed under CC BY 4.0 by the author.