쿼리스트링(Query String) 활용하기

React에서는 URL의 쿼리스트링을 활용하여 특정 데이터를 처리할 수 있습니다. 주로 react-router-dom의 useSearchParams 훅을 사용하여 쿼리스트링을 읽고, 이를 통해 컴포넌트의 동작을 제어하는 방식입니다. 이번 글에서는 Pokémon 예제 프로젝트를 통해 쿼리스트링을 어떻게 활용하는지 살펴보겠습니다.

 

페이지의 url은 /pokemon-detail?id=5 이라고 가정해봅시다.

id=5에서 5에는 어떻게 접근할까요?

useLocation

useLocation은 react-router-dom에서 제공하는 훅으로, 현재 URL 정보를 반환합니다. 이를 사용하여 URL의 쿼리스트링을 확인할 수 있습니다.

 

const location = useLocation();
console.log(location);

 

 

 

이렇게 search로 ?id=5라는 정보가 반환된 것을 알 수 있습니다.

 

useSearchParams

useSearchParams 훅을 사용하면 URL의 쿼리스트링에서 특정 값을 쉽게 추출할 수 있습니다. 이 훅은 URLSearchParams 객체를 반환하며, 쿼리스트링의 파라미터 값을 쉽게 읽을 수 있습니다.

 

const [searchParams] = useSearchParams();
console.log(searchParams);

 

 

5라는 값에 접근하고 싶을 경우 searchParams.get('id')를 통해 접근할 수 있습니다.