useSearchParams 사용법

 

 

1. navigate로 페이지를 이동할 때 ?키이름={값} 쿼리스트링을 추가한다.

navigate(`/detail?id=${item.id}`)

 

2. 이동한 페이지(컴포넌트)에서 searchParams Import

  const [searchParams, setSearchParams] = useSearchParams();

 

3. get 메서드의 값으로 1번에서 지정했던 키이름을 넣는다.

  const targetId = searchParams.get('id');

 

 

값을 읽어오는 메서드:

1. searchParams.get(key): 지정된 key에 해당하는 값을 가져온다. 해당 key에 여러 개의 값이 있더라도 첫 번째 값을 반환한다.
2. searchParams.getAll(key): 지정된 key에 해당하는 모든 값을 가져온다.
3. searchParams.toString(): URLSearchParams 객체를 쿼리 문자열 형태로 반환한다.

값을 변경하는 메서드:

1. searchParams.set(key, value): 지정된 key의 값을 주어진 value로 설정한다. 이전에 해당 key에 연결된 값이 있으면 덮어쓴다.
2. searchParams.append(key, value): 지정된 key에 값을 추가한다. 만약 이미 해당 key에 연결된 값이 있으면 그 뒤에 추가된다.