use-query-params 로 queryString 관리하기

 

use-query-params 라이브러리를 사용하면

Default 값도 사용할 수 있고, 각각의 쿼리의 타입도 지정할 수 있어서 편하다.

 

아래와 같은 형식으로 set을 하면 queryString이 자동으로 관리된다.

(자세한 내용은 맨 밑의 공식 문서 참고)

    const [query, setQuery] = useQueryParams({
        pageNo: withDefault(NumberParam, DEFAULT_PAGE_NO),
        pageSize: withDefault(NumberParam, DEFAULT_PAGE_SIZE),
        sortColumn: withDefault(StringParam, DEFAULT_SORT_COLUMN),
        sortOrder: withDefault(StringParam, DEFAULT_SORT_ORDER),
        searchedText: withDefault(StringParam, DEFAULT_SEARCHED_TEXT),
    });

 

쿼리를 변경할 때 아래와 같이 쿼리값을 변경해서 여러 값을 한 번의 주소 이동으로 변경할 수 있다.

setQuery({ pageNo: defaultPageNo, searchedText: value }, 'pushIn');

 

이번에 라이브러리 사용하면서 문서를 제대로 안읽어서 삽질을 많이 했다.

새로운 라이브러리를 쓸 때는 문서를 꼼꼼히 읽고 일을 하자!!! 아아아아!!

 

 

* 참고 문서

https://github.com/pbeshai/use-query-params/tree/master/packages/use-query-params#readme

GitHub - pbeshai/use-query-params: React Hook for managing state in URL query parameters with easy serialization.