쿼리 스트링과 searchParams

쿼리 스트링

쿼리 스트링은 물음표 뒤에 오는 모든 문자열을 의미한다. key와 value로 이루어지며 = 를 기준으로 앞에 있는 데이터가 key, 뒤에 있는 데이터가 value이다. & 로 구분하여 여러 개의 key와 value를 만들 수 있다.

 

 

💡데이터 리스트의 필터링 기능을 구현하면서 쿼리 스트링을 사용했다. 쿼리 스트링을 선택한 이유는 새로고침 시에도 필터링된 데이터가 유지되었으면 했고, 상세 페이지를 이동하고 다시 리스트 페이지로 되돌아왔을 때에도 필터링 상태를 유지하고 싶었기 때문이다.

searchParams

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

const [searchParams, setSearchParams] = useSearchParams();

searchParams는 URLSearchParams의 객체이다. searchParmas가 제공하는 다양한 메서드를 통해 쿼리 스트링의 값을 가져오거나 변경할 수 있다.

 

set

searchParams.set('select', value);

set은 파라미터를 변경하는 메서드이다. 첫번째 매개변수는 key, 두번째 매개변수는 value를 의미한다. append 메서드와 set 메서드 모두 쿼리 스트링을 변경할 수 있다.

• append 메서드 : 같은 key가 존재해도 계속 추가할 수 있다. 이전의 key에 영향을 주지 않고, 새로 추가한다.
• set 메서드 : 여러 개의 key가 존재하는 경우 중복되는 key를 모두 삭제하고, 하나의 key만 남겨둔다.

 

get

searchParams.get('select');

get은 특정 key의 value를 가져올 수 있는 메서드이다. 만약 key가 여러 개인 경우는 가장 첫 번째의 key의 value를 반환한다.

 

delete

searchParams.delete('select');

delete는 파라미터의 key를 삭제할 수 있는 메서드이다.

setSearchParams

setSearchParams(searchParams, { replace: true });

setSearchParams는 현재 url의 쿼리 스트링을 변경해주는 역할을 한다. replace 옵션을 통해 브라우저 히스토리 스택에 쌓지 않게 만들 수 있다.

쿼리 스트링을 사용해야 하는 이유

✅ 새로고침 시에도 데이터가 유지되어야 하는 경우에 사용하면 유용하다.

• 쿼리 스트링은 새로고침을 해도 url이 유지된다. 사용자가 설정한 필터 상태를 그대로 유지할 수 있다.

✅ 별도의 상태 관리가 필요하지 않다.

✅ 리스트 → 상세 페이지로 이동하고, 이전 페이지로 다시 돌아갈 때 필터링된 상태를 유지할 수 있다.

• navigate 함수의 인자로 -1을 넣으면 바로 이전 페이지로 이동시킬 수 있다.