useQueryState 훅

[jaeyoung-kwon]

어떤 훅인가요?

useQueryState는 URL의 search params를 React 상태처럼 다룰 수 있도록 해주는 커스텀 훅임.
이 훅을 사용하면 useState를 쓰듯이 [state, setState]를 반환받아 컴포넌트 내에서 값을 관리할 수 있고,
상태가 변경될 때 URL의 search params도 자동으로 동기화되어 브라우저 주소창과 상태가 항상 일치함.

export interface UseQueryStateOptions<T> {
  defaultValue: T;
  mode?: 'push' | 'replace';
  parse?: (value: string | null) => T;
  serialize?: (value: T) => string;
}

export type UseQueryStateReturn<T> = [
  T, // 현재 상태 값
  (value: T) => void // 상태 업데이트 함수
];

export declare function useQueryState<T = string>(
  key: string,
  options: UseQueryStateOptions<T>
): UseQueryStateReturn<T>;

사용

const [page, setPage] = useQueryState('page', { defaultValue: 1, mode: 'push' });

setPage(2); 
// => 상태도 2로 바뀌고, URL도 ?page=2 로 자동 업데이트됨

초기 상태는 URL에서 읽어오며, URL에 값이 없으면 기본값(defaultValue)을 사용함.
또한 상태를 업데이트하면 history.pushState 또는 replaceState를 사용해 브라우저 히스토리에도 반영되므로,
뒤로가기/앞으로가기 동작도 자연스럽게 동작함.

이 훅을 선정한 이유? (선택)

이 훅을 선정한 이유에 대해 설명해주세요!

참고할만한 자료(선택)

• nuqs 공식 문서

[eunsoA]

defaultValue 옵셔널하게

[hoyyChoi]

그럼 훅 내부에서 searchParams로 쿼리스트링 가져오고, 없으면 defaultValue 붙여서 url 반영

[jaeyoung-kwon]

T extends string | number

[jaeyoung-kwon]

setState -> updater 함수 넣을 수 있게 prev 사용하는