쿼리스트링

• URL에서 ? 뒤에 추가되는 매개변수
• 특정 데이터를 서버나 클라이언트로 전달할 때 사용
  • 검색조건, 필터링 옵션, 페이지번호, 정렬방식 등을 전달
• 기본 구조

https://example.com/page?key1=value1&key2=value2

// ? 쿼리스트링 시작
// key1=value1 쿼리의 첫번째 매개변수
// & 매개변수들 연결
// key2=value2 두번째 매개변수

 

• 예시

https://example.com/search?q=react&sort=asc&page=2

// q=react 검색키워드는 react
// sort=asc 정렬방식 오름차순
// page=2 2번째 페이지

 

• 리액트 예시

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

function SearchPage() {
  const location = useLocation(); // 현재 URL 정보 가져오기
  const searchParams = new URLSearchParams(location.search); // 쿼리스트링 파싱

  const query = searchParams.get('q'); // 'q'라는 키의 값을 가져옴
  const sort = searchParams.get('sort'); // 'sort'라는 키의 값을 가져옴

  return (
    <div>
      <h1>Search Page</h1>
      <p>Query: {query}</p>
      <p>Sort: {sort}</p>
    </div>
  );
}

export default SearchPage;

// location.search URL의 쿼리스트링(?react&sort=acs)를 가져옴
// URLSearchParams.get('') 특정 쿼리 파라미터의 값을 가져옴

 

• 쿼리스트링 추가 및 수정

import React from 'react';
import { useNavigate } from 'react-router-dom';

function FilterPage() {
  const navigate = useNavigate();

  const applyFilter = () => {
    // 쿼리스트링 추가
    navigate('/search?q=react&sort=desc');
  };

  return (
    <div>
      <h1>Filter Page</h1>
      <button onClick={applyFilter}>Apply Filter</button>
    </div>
  );
}

export default FilterPage;

// navigate('/path?key=value')를 사용하여 쿼리스트링이 포함된 경로로 이동

 

• 동적으로 쿼리스트링 추가

import React from 'react';
import { useNavigate } from 'react-router-dom';

function DynamicFilterPage() {
  const navigate = useNavigate();

  const applyDynamicFilter = () => {
    const params = new URLSearchParams();
    params.set('q', 'javascript');
    params.set('sort', 'asc');
    params.set('page', 3);

    navigate(`/search?${params.toString()}`);
  };

  return (
    <div>
      <h1>Dynamic Filter Page</h1>
      <button onClick={applyDynamicFilter}>Apply Dynamic Filter</button>
    </div>
  );
}

export default DynamicFilterPage;

// output -> /search?q=javascript&sort=asc&page=3

 

• 리액트 Router에서 쿼리스트링 처리 (React Router v6 이상)

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

function SearchPage() {
  const [searchParams] = useSearchParams(); // 쿼리스트링 객체 가져오기

  const query = searchParams.get('q'); // 'q'의 값을 가져옴
  const sort = searchParams.get('sort'); // 'sort'의 값을 가져옴

  return (
    <div>
      <h1>Search Page</h1>
      <p>Query: {query}</p>
      <p>Sort: {sort}</p>
    </div>
  );
}

export default SearchPage;

 

• 쿼리스트링 수정

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

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

  const applyFilter = () => {
    searchParams.set('sort', 'desc');
    searchParams.set('page', 2);
    setSearchParams(searchParams); // URL을 업데이트
  };

  return (
    <div>
      <h1>Filter Page</h1>
      <button onClick={applyFilter}>Apply Filter</button>
    </div>
  );
}

export default FilterPage;

// 기존 URL에 sort=desc&page=2가 추가