쿼리스트링
쿼리스트링은 URL의 한 부분이며 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용
- 기존 URL 요청 예시
프론트: /list -> 리스트 요청
/detail/ ->상세 페이지 요청
-> 만약 상품의 종류가 어마무시하게 많아진다면 /list 페이지에서 모든 상품을 보여주는 것을 비효율적이다. 왜냐하면 1억개의 상품 정보를 모두 불러오는 것도, 또한 유저는 판매량이나 최신순 같은 기준을 두고 정렬된 데이터를 보고싶어 하기 때문이다.
이런 상황에서 '상품 리스트 보여줘 + 최신순 10개' 와 같이 구체적인 요청을 한다면 효율적일 것이다.
쿼리스트링은 이름 그대로 문자열 타입이며, key = value로 표현. 또한 URL의 일부로 쿼리스트링의 시작점은 "?"으로 표시된다.
react-router-dom에서 쿼리스트링 사용하기
- 쿼리스트링을 포함해서 Routing하기
1. Link나 navigate로 사용하면 된다.
<Link to="/list?sort=popular" />
navigate("/list?sort=popular")2. 컴포넌트에서 쿼리 스트링 값 가져오기
필요 hook : useLocation, useSearchParams
쿼리스트링 값 가져오고 쿼리스트링값 변경 시 리렌더링
useLocation hook
- useLocation은 Location 객체를 리턴한다. Location 객체는 현재 위치(URL)에 포함된 여러 정보를 포함한다.
정보 프로퍼티 - pathname, search, hash, state, key
(Location 객체의 state는 React state와 다름)
쿼리스트링 정보 = search 프로퍼티
useSearchParams hook
useLocation으로 가져온 쿼리스트링은 활용하기에 불편한 점이 있다
?sort=popular는 전체 쿼리 스트링을 하나의 문자열로 표현해주기 때문에 원하는 값만 가져오기 위해서는 ?sort=popular를 자바스크립트를 통해 parsing하는 과정을 거쳐야 한다.
과정: "?"를 제거 -> sort문자열 찾기 -> "=" 뒤에 위치한 값 꺼내오기 -> popular 획득
이러한 복잡한 과정을 해결해주는 useSearchParams
const [searchParams, setSearchParams] = useSearchParams();- 값 읽어오는 메서드
- searchParams.get(key): 특정 key의 value 가져오기
- searchParams.getAll(key) : 특정 key의 모든 value 가져오기
searchParams.toString(): 쿼리스트링을 string 형태로 리턴
?sort=popular&sort=latest의 경우
searchParams.toString()의 리턴값: "?sort=popular&sort=latest"
- 값을 변경하는 메서드
searchParams.set(key, value): 인자로 전달한 key값을 value로 설정. 만약 동일 key에 여러 value가 이미 존재하면 set 메서드를 호출하면서 설정한 값 외에는 삭제됨.
?sort=popular&sort=latest 의 경우
searchParams.set("sort", "clear") 호출
searchParams.toString()의 리턴값: "?sort=clear"
searchParams.append(key,value): 메서드를 호출하면서 인자로 전달한 key 값을 value로 추가. 기존 value를 건들지 않음.
?sort=popular&sort=latest 의 경우
searchParams.append("sort", "clear") 호출
searchParams.toString()의 리턴 값
: "?sort=popular&sort=latest&sort=clear"
searchParams를 변경하는 메서드를 이용해서 값을 변경해도 실제 URL의 쿼리 스트링은 변하지 않기 때문에 이 때 setSearchParams(searchParams)를 인자로 전달해줘야 한다.
🤔 useSearchParams ?
useSearchParams 는 배열 타입의 값을 반환하며,
첫번째 원소는 쿼리파라미터를 조회하거나 수정하는 메서드들이 담긴 객체를 반환합니다.
get 메서드를 통해 특정 쿼리파라미터를 조회할 수 있고,
set 메서드를 통해 특정 쿼리파라미터를 업데이트할 수 있습니다.
만약 get을 통한 조회시 쿼리파라미터가 존재하지 않는다면 null 이 반환됩니다.
두번째 원소는 쿼리파라미터를 객체 형태로 업데이트할 수 있는 함수를 반환합니다.
쿼리파라미터를 사용할 때 주의할 점은
쿼리파라미터를 조회할 때 값은 무조건 문자열 타입이라는 것입니다.
즉, true 또는 false 값을 넣게된다면 값을 비교할 때 꼭 'true' 와 같이 따옴표로 감싼 후 비교를 해야하고,
숫자를 다루게 된다면 parseInt를 사용하여 숫자 타입으로 변환해야 합니다.
