[React]useSearchParams

useParams가 path Parameter를 활용해 React이 동적라우팅을 도와줬다면,

useSearchParams는 Query Parameter를 활용한 React동적 라우팅을 도와주는 훅이다.

useSearchParams의 활용

우선 다음과 같이 사용한다.

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

const [searchParams, setSearchParams] = useSearchParams();

쿼리스트링을 이용한 api에는 ?로 QueryParameter의 시작을 알리고 key값과 value값을 필요로한다.

key값과 value여러개를 &를 통해 연결한다.

searchParams의 메서드

1) set

set메서드는 인자로 2개를 받는다.

첫 번째 인자는 key값 두 번째 인자는 value로 설정할 값이다.

searchParams.set('sort', 'new')

2) get

get메서드는 인자로 1개를 받는다.

첫 번째 인자에 key값이 들어가며 출력하는 값은 그 key값에 해당하는 value를 찾는다.

searchParams.get('sort')

위에서 sort의 key값이 new였으므로 new를 반환한다.

3) append

append메서드도 set과 마찬가지로 2개의 인자를 받으며, 첫 번째 인자는 key, 두 번째 인자는 value값이다.

set메서드와 다른 점이라면 set은 sort의 값을 아예 바꿨다면, append는 해당하는 value를 뒤에 추가한다.

URL변경

메서드를 쓴다고 해서 바뀌지 url이 바로 바뀌지는 않는다.

setSearchParams함수가 url을 해당으로 바꿔주는 함수이다.

searchParams에 key값과 value값이 저장이 되어있으므로

setSearchParams(searchParams)

로 url을 변경할 수 있다.

setSearchParams직접사용

setSearchParams({sort : 'new', offset : 0, limit : 8});

로 url이 ?sort=new&offset=0&limit=8으로 변경이 바로 된다.

setSearchParams({})

위와 같이 빈 객체를 넣으면 ?이하가 다 사라진다.

실제 사용한 예시

다음은 1차 프로젝트를 만들면서 사용했던 예제 코드인데, 아직 익숙하지 않은점

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

const [searchParams, setSearchParams] = useSearchParams();

const offset = searchParams.get('offset');
const limit = searchParams.get('limit');
const sort = searchParams.get('sort');

//변수를 설정한 후 각각의 value값을 저장한다 > fetch할 때 바뀐 값에 따른 요청을 하기 위함.

const pagination = pagingNum => {
    searchParams.set('offset', (pagingNum - 1) * 8);
    searchParams.set('limit', 8);
    setSearchParams(searchParams);
  };

//버튼 1을 누르면 offset=0, limit 8 
//버튼 2를 누르면 offset=8, limit 8

const clickSort = var => {
    setSearchParams({ sort: var, offset: 0, limit: 8 });
  };
//다음이 sort를 바꿔주는 함수이고 인자로 들어오는 값이 sort의 value로 설정된다.
//만약 인자로 low : ?sort=low&offset=0&limit=8
//만약 인자로 new : ?sort=new&offset=0&limit=8

다음과 같이 설정된다.