[React] 리액트에서 쿼리스트링 값 가져오기 (useSearchParams)

쿼리스트링이 궁금하다면 

📌 쿼리스트링(Query String)이란?

 

쿼리스트링이란 사용자가 입력 데이터를 전달하는 방법 중 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말합니다. 쿼리스트링은 url 뒤에 덧붙여서 추가적인 정보를 서버 측에 전달하는 것으로, 클라이언트가 어떤 특정 리소스에 접근하고싶어하는지 정보를 담습니다.

 

• 정해진 엔드포인트 주소 이후에 ? 를 쓰는 것으로 쿼리스트링이 시작하는 것을 알립니다.
• parameter = value 로 필요한 파라미터의 값을 작성합니다.
  • = 으로 key와 value를 구분합니다. 
• 파라미터가 여러 개일 경우 & 를 붙여 여러 개의 파라미터를 넘길 수 있습니다.
• url 경로에 영향을 끼치지 않습니다.
• 게시판 등 값을 받아올 때 주로 사용됩니다.
• ex) /product?page=1&num=10
  • 쉬운 예시로 1페이지의 10번이라는 것을 의미하는 쿼리스트링입니다.

 

🤔 리액트에서 쿼리스트링 사용하기

 

리액트에서는 react-router-dom에서 제공되는 useSearchParams를 사용해서 쿼리스트링 값을 가져올 수 있습니다.

useSearchParams를 사용하기 위해서는 먼저 import를 해와야 합니다.

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

 

다음으로 사용을 위해 선언해줍니다. useState를 사용할 때와 동일하게 [ ] 안에 변수, set변수 형식으로 선언합니다. 

let [query, setQuery] = useSearchParams();

query.get('쿼리값') 을 통해 쿼리스트링 값을 받아올 수 있습니다.

 

예를 들어 

/product?page=1&num=4라는 url에서 num의 값을 받아오기 위해서는 query.get('name')을 사용하면 4라는 값을 받아올 수 있습니다.

 

🤔 useSearchParams ?

useSearchParams 는 배열 타입의 값을 반환하며, 

첫번째 원소는 쿼리파라미터를 조회하거나 수정하는 메서드들이 담긴 객체를 반환합니다.

 

get 메서드를 통해 특정 쿼리파라미터를 조회할 수 있고,

set 메서드를 통해 특정 쿼리파라미터를 업데이트할 수 있습니다.

 

만약 get을 통한 조회시 쿼리파라미터가 존재하지 않는다면 null 이 반환됩니다. 

두번째 원소는 쿼리파라미터를 객체 형태로 업데이트할 수 있는 함수를 반환합니다.

 

 

쿼리파라미터를 사용할 때 주의할 점은

쿼리파라미터를 조회할 때 값은 무조건 문자열 타입이라는 것입니다.

즉, true 또는 false 값을 넣게된다면 값을 비교할 때 꼭 'true' 와 같이 따옴표로 감싼 후 비교를 해야하고,

숫자를 다루게 된다면 parseInt를 사용하여 숫자 타입으로 변환해야 합니다.