쿼리 스트링이 뭐지? query string

🔍 쿼리 스트링이 뭘까?

쿼리 스트링(Query String)은 URL에서 ? 뒤에 위치하는 파라미터들의 집합이다. 예를 들어, https://example.com/products?category=electronics&page=2처럼, ? 뒤에 category=electronics와 page=2라는 두 개의 파라미터가 붙어 있다. 이처럼 쿼리 스트링을 사용하면, 웹 페이지에서 필터링이나 페이지 번호를 전달하는 등의 작업을 할 수 있다.

🧠 쿼리 스트링의 기본 개념과 사용하는 상황

쿼리 스트링은 보통 다음과 같은 상황에서 사용된다:

🔍 검색 필터링:
특정 카테고리나 조건을 기반으로 검색 결과를 필터링할 때

📄 페이지네이션:
여러 페이지로 나눠진 데이터의 페이지 번호를 전달할 때

⚡ 동적 데이터 로딩:
URL을 통해 동적으로 데이터를 로드할 때

URL에서 쿼리 스트링을 사용하면 서버나 클라이언트가 쉽게 데이터를 처리할 수 있다. 예를 들어, category=electronics&page=2를 URL에 포함시키면, 페이지 로딩 시 해당 카테고리의 두 번째 페이지 데이터를 로드하는 방식으로 활용된다.

🔧 쿼리 스트링 사용 방법

리액트에서 쿼리 스트링을 다루는 방법으로는 useLocation과 useSearchParams 훅을 사용할 수 있다. 이 두 훅은 각각 쿼리 스트링을 읽고 수정하는 데 유용하다.

1. useLocation 훅 사용하기 🌐

useLocation은 현재 URL을 가져오는 훅으로, URL에 포함된 쿼리 스트링을 쉽게 확인할 수 있다. useLocation을 사용하면, URL 전체를 포함한 객체가 반환된다. 이 객체에서 search 속성을 통해 쿼리 스트링을 확인할 수 있다.

예시 코드 :

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

const ProductPage = () => {
  const location = useLocation();  // 현재 URL 정보 가져오기
  const query = new URLSearchParams(location.search);  // 쿼리 스트링 파라미터 추출
  const category = query.get('category');  // category 파라미터 값 가져오기
  const page = query.get('page');  // page 파라미터 값 가져오기

  return (
    <div>
      <h1>상품 목록</h1>
      <p>카테고리: {category || '없음'}</p>
      <p>페이지: {page || '1'}</p>
    </div>
  );
};

useLocation을 사용하여 현재 URL을 가져온 뒤, new URLSearchParams(location.search)로 쿼리 스트링을 쉽게 파싱할 수 있다. 그 후 get() 메서드로 원하는 파라미터 값을 가져올 수 있다.

2. useSearchParams 훅 사용하기 🔄

useSearchParams는 쿼리 파라미터를 다루는 데 특화된 훅으로, 쿼리 스트링을 읽고 수정할 수 있다. useSearchParams는 searchParams라는 상태와 setSearchParams라는 함수를 반환한다. 이를 통해 쿼리 파라미터를 쉽게 읽고 수정할 수 있다.

예시 코드 :

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

const ProductPage = () => {
  const [searchParams, setSearchParams] = useSearchParams();  // 쿼리 파라미터 상태와 setter 함수
  const category = searchParams.get('category');  // category 파라미터 값 가져오기
  const page = searchParams.get('page');  // page 파라미터 값 가져오기

  const changeCategory = () => {
    // 쿼리 파라미터 수정하기
    setSearchParams({ category: 'fashion', page: '1' });
  };

  return (
    <div>
      <h1>상품 목록</h1>
      <p>카테고리: {category || '없음'}</p>
      <p>페이지: {page || '1'}</p>
      <button onClick={changeCategory}>패션으로 변경</button>
    </div>
  );
};

useSearchParams 훅을 사용하면, 쿼리 파라미터를 수정할 수 있다. 위 예시에서는 버튼을 클릭하면 category가 fashion으로 변경되며, 페이지 번호도 1로 설정된다.

💡 정리

쿼리 스트링은 URL에서 데이터를 전달할 때 사용된다. 보통 검색, 필터링, 페이지네이션에 활용된다.
useLocation은 현재 URL을 읽을 수 있게 해주고, useSearchParams는 URL 쿼리 파라미터를 읽고 수정할 수 있게 해준다.
두 훅을 사용하면 리액트 앱에서 URL을 효과적으로 관리하고 동적인 기능을 구현할 수 있다.
쿼리 스트링을 다루는 것은 동적이고 직관적인 웹 애플리케이션을 만들 수 있게 해준다.