React 에서 쿼리스트링과 useSearchParams 사용하기

쿼리 스트링이란?

URL의 한 부분으로써, URL에 부가정보(어떤 키워드를 검색하거나 페이지에 필요한 옵션)을 포함할 때 사용한다.

쿼리스트링을 사용하면 다양한 상황에서 조건에 맞는 정렬된 형태의 정보를 요청하고 받을 수 있다.

 

쿼리 스트링의 필요성?

검색을 예를 들자.

공구를 검색하는데 세상 모든 공구를 검색하는 것이 아니기에 검색할 키워드와 보여질 갯수, 옵션별 노출(상위 10개, 최신 10개 등) 과 같이 상황별 구체적으로 정보를 요청하고 받기 위해 쿼리 스트링을 사용한다.

 

쿼리 스트링의 모습과 라우팅

문자열의 모습을 하고 key=value 와 같이 작성된다.

URL의 일부분으로 ? 를 기점으로 시작되며 각 key의 구분은 & 로 작성된다.

// 한개만 있는 경우
http://www.example.com/fe?age=25
//여러개가 있는 경우
http://www.example.com/fe?age=25&height=183&job=student

 

위와 같이 작성된 쿼리 스트링은 라우팅도 가능하다.

<Link to="/fe?age=25&height=183&job=student" />
navigate("/fe?age=25&height=183&job=student")

 

컴포넌트에서 쿼리 스트링 사용하기

react-router-dom의 useLocation과 useSearchParams 두개의 hook을 이용해 가져올 수 있다.

이때, useLocation은 현제 주소의 Location 객체를 반환한다.

 

이번 글에서는 useSearchParams를 집중적으로 다루도록 하겠다.

useSearchParams를 이용하게 되면 useLocation을 사용했을 때 보다 다양한 메서드를 제공해주기 때문에

URLSearchParams 객체를 통해 다양한 방법으로 값을 가져올 수 있다.

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

const [searchParams, setSearchParams] = useSearchParams();

위와 같이 초기 선언해준다.

searchParams는 URLSearchParams 객체임과 동시에 쿼리 스트링을 조작하는 메서드를 제공한다.

setSearchParmas는 인자에 객체, 문자열을 넣으면 현재 url의 쿼리 스트링을 변경해주는 기능을 한다.

 

값을 읽어오는 메서드

◼ searchParams.get(key) : 특정 key의 value를 가져오는 메서드, key가 두개라면 먼저 나온 value 리턴

◼ searchParams.getAll(key) : 특정 key에 해당하는 모든 value를 가져오는 메서드

◼ searchParams.toString() : 쿼리 스트링을 string 형태로 가져오는 메서드

 

값을 변경하는 메서드

◼ searchParams.set(key, value) : 인자로 전달한 key 값을 value로 설정한다, 기존의 값이 있다면 그 값은 삭제

◼ searchParams.append(key, value) : 기존 값을 변경하거나 삭제하지 않고 추가하는 메서드

 

실제 쿼리 스트링을 변경하려면  setSearchParams에 searchParams를 인자로 전달해야한다.이와 관련된 재밌는 글을 발견했다.일종의 검색 로직인데 form에 작성된 키워드를 setSearchParams를 이용해 쿼리 스트링을 변경해줘 검색하는 로직이다.

useSearchParams 개념도 | 코드잇

 

 

활용 예제

현제 진행하고 있는 프로젝트에서 소셜 로그인에 필요한 code와 state를 받아와 state의 유효성 검사를 거친뒤,

code를 서버로 보낸뒤 서버에서 이 코드를 가지고 로그인을 한 사용자의 정보의 접근 요청을 하는 로직이다.

 

// LoginLoading.tsx

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

const LoginLoading = () => {
  // 쿼리스트링의 code와 state를 받아옴
  const [searchParams, setSearchParams] = useSearchParams();
  const code = searchParams.get('code');
  const state = searchParams.get('state')
  console.log(code, state);
  return (
    <>
      {`${code}, ${state}`}
    </>
  )
}

export default LoginLoading;

// App.tsx
...

function App() {
  return (
    <>
      <Routes>
        ...
        <Route path="/naver_login/callback" element={<LoginLoading />}></Route>
        ...
      </Routes>
      <Toast />
    </>
  );
}

export default App;

 

위와같이 작성하고 실제 로그인 요청을 보내주면

 

쿼리 스트링에서 code와 state값이 추출된 모습니다.

사진과 같이 쿼리스트링에서 code와 state값이 추출되었다.