쿼리 스트링
쿼리 스트링은 URL 의 한 부분으로, 요청하는 URL 에 부가정보를 포함할 때 사용
기존 URL 은 단순한 형태의 요청과 응답을 주고 받았지만 쿼리 스트링을 사용하면 조건에 맞게 정렬된 특정 형태의 정보를 요청하고 받을 수 있다.
예) '상품 리스트 보여줘' 가 아닌 '상품 리스트를 최신순으로 상위 10개만 보여줘'라고 구체적으로 요청하기 위해 쿼리 스트링을 사용
useState로 필터링을 하면 안되는 이유
state는 unmount, mount로 되기 때문에
페이지 공유 or 뒤로가기 버튼을 누르면 기존에 했던 필터링이 모두 풀려버린다.
- 형태
key=value
?를 통해 여기부터 시작이라고 표시
각 페어의 구분은&로 표시
useSearchParams
const [serchParams, setSearchParams] = useSearchParams();- searchParams
URLSearchParams 객체
쿼리 스트링을 다루기 위한 여러 메서드를 제공 - setSearchParams
인자에 객체, 문자열을 넣어주면 현재 url 의 쿼리스트링을 변경하는 기능을 제공
값을 읽어오는 메서드
-
searchParams.get(key)
특정한 key의 value를 가져오는 메서드, 해당 key 의 value 가 두개라면 제일 먼저 나온 value 만 리턴 -
searchParams.getAll(key)
특정 key 에 해당하는 모든 value 를 가져오는 메서드 -
searchParams.toString()
쿼리 스트링을 string 형태로 리턴
값을 변경하는 메서드
-
searchParams.set(key, value)
인자로 전달한 key 값을 value 로 설정, 기존에 값이 존재했다면 그 값은 삭제됨 -
searchParams.append(key, value)
기존 값을 변경하거나 삭제하지 않고 추가하는 방식
serchParams을 변경하는 메서드로 값을 변경해도 실제 url 의 쿼리 스트링은 변경되지 않는다.
이를 변경하려면 setSearchParams에 searchParams를 인자로 전달해야 한다.
