✏️ React의 useSearchParams

 

이전 포스팅

✏️ React의 useParams, useLocation 그리고 Query String

 

이전  포스팅에서 `useParams`와 `useLocation`에 대해 작성했는데,

`useSearchParams`는 무슨 역할을 하는지 알아보았다.

 

 

 

들어가기전에!

`useSearchParams`는 react-router-dom 라이브러리에서 제공하는 Hook이므로, react-router-dom을 설치해 줘야 한다.

npm i react-router-dom
//또는
yarn add react-router-dom

 

 

 

---

 

 

useSearchParams

읽기와 쓰기가 모두 가능한 훅으로, 웹페이지에 데이터를 전달하는 가장 간단한 방법이다.

예시
/detail?id=1&mode=11

?id=1&mode=11
이 부분을 Query String이라고 한다.

 

쿼리스트링은 별도의 매핑을 하지 않아도 자동으로 매핑이 되고, `?` 뒤에 정보는 페이지 라우팅 경로에 영향을 주지 않는다.

 

 

 

 

사용예시

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

let [searchParams, setSearchParams] = useSearchParams();

 

`searchParams`변수는 `{ key : value }` 형식으로 저장되어 있고,

`get`메서드에 `key`를 전달하면 해당 `value`를 읽어서 출력해준다.

 

`searchParams`에는 데이터의 값이 들어가 있다.

`setSearchParams`에는 데이터를 변경시킬 수 있는 함수이다.

 

 

 

 

코드예시

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

const Detail = () => {

    const [searchParams, setSearchParams] = useSearchParams();

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

    console.log("id :", id, "mode : ", mode);
};

 

`URN`이 `/detail?id=1&mode=11` 이라고 가정해보자.

`get`메서드를 이용하여 `searchParams`안에 있는 데이터를 가져올 수 있다.

결과값은 `id : 1`, `mode : 11` 

 

 

 

 

setSearchParams 활용해보기

<button onClick={() => setSearchParams({ foo: "bar" })}>쿼리스트링 내용 바꿔!</button>

 

`setSearchParams`로 변경할 데이터의 객체를 넣어주면 버튼을 클릭했을 때, 

데이터 경로의 데이터가 바뀐다.

url 결과값은 `/detail?foo=bar`

 

 

 

 

 

 

---

 

 

 

 

Docs

useSearchParams v6.26.1 | React Router