쿼리 스트링

HYUK·2023년 2월 23일

react

목록 보기

2/15

1. 쿼리 스트링 이란?

url의 한 부분
요청하고자 하는 url에 부가적인 정보를 포함하고 싶을때 사용
일반적으로 url을 통한 정보요청은 비교적 단순한 형태로 이루어짐

2. 쿼리 스트링의 필요성

예를 들어 상품이 수천개라고 가정했을때, 유저가 /list페이지로 접속 했을때 수천개의 상품을 모두 보여주는것은 비효율적인데 이유는 모든 상품을 가져오는데까지 시간이 오래걸리고 실제 유저는 판매량순, 최신순, 평점순 등으로 더 정렬되고 특정된 형태의 정보를 보고싶어하기 때문이다. 이때 활용할 수 있는것이 쿼리 스트링 이다.

3. 쿼리스트링의 형태

쿼리 스트링은 url의 일부이기 때문에 쿼리스트링의 시작점을 알려줘야하는데 ?를 통해서 이를 표현한다.
쿼리 스트링은 이름 그대로 문자열의 형태를 띠고 있으며 key=value로 표현된다.
(위 예시 url에서는 sort라는 키에 popular는 value를 입력해서 인기순으로 정렬된 정보를 보여주는것이다.)
쿼리 스트링에서 표현할 수 있는 key=value 페어의 개수에 제한은 없으나, 여러개의 key=value페어를 표현할때는 각페어를 표시하게위해 &을 사용한다.
(위 예시 url에서는 인기순으로 정렬된 데이터와 내림차순이라는 조건을 추가한 정보를 요청하는것이다.)

4. 활용방법

4-1. 쿼리 스트링을 포함한 라우팅

쿼리 스트링은 동적 라우팅 처럼 Router 컴포넌트에 별도 설정을 할 필요가 없다.
(쿼리 스트링은 요청하고자하는 url에 부가적인 정보를 포함하기 위해서 사용하기때문이다.)
라우팅 방법
-> Link 컴포넌트 : <Link to = "/list?sort=popular" />
-> useNavigate : navigate("list?sort=popular")
쿼리 스트링을 포함한 주소로 이동하더라도 실제 보여지는 컴포넌트는 쿼리 스트링의 시작점인 ? 전에 적힌 경로에 해당하는 컴포넌트가 보여지게 된다.
(<Link to = "/list?sort=popular" /> 이경로를 예를 들면 list 컴포는트가 보여지게 된다.)

4-2. 컴포넌트에서 쿼리스트링 가져오기

react-router-dom에는 스트링의 값을 가져올 수 있는 hook이 존재
이 hook들은 state처럼 쿼리 스트링의 값이 바뀌면 컴포넌트를 리렌더링 해주는 기능을 제공하고 있다.
그 종류로 useLocation, useSearchParams 이렇게 두가지가 있다.

// src/List.js

import React from 'react';

const List = () => {
  return (
    <section>
      <h1>This is List Page</h1>
    </section>
  );
};

export default List;


// src/Router.js

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import List from './List';

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/list" element={<List />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

4-3. useSEarchParams

useSearchParamshook을 호출하면 useState와 비슷하게 배열의 형태로 searchParams, setSearchParams 함수를 리턴 해준다. (방식은 비슷하나 반환되는 값은 조금 차이가 있다.)
-> searchParams : URLSearchParams객체, 퀄시트링을 다루기 위한 여러 메서드 제공
-> setSearchParams : 인자에 객체 or 문자열을 넣어주면 url의 쿠리스트링을 변경하는 기능 제공

4-3-1. searchParams의 자주 사용하는 메서드

값을 읽어오는 메서드
-> searchParams.get(key) : 특정한 key의 value를 가져오는 메서드로서 원하는 쿼리 스트링의 key를 인자로 넣어서 메서드를 호출하면 해당 key에 부합하는 value가 반환된다.
-> searchParams.getAll(key) : 특정한 key에 해당하는 모든 value를 가져오는 메서드로 인자에 넣은 key에 해당하는 모든 value를 배열의 형태로 리턴해줍니다.
-> searchParams.toString() : 쿼리 스트링을 string 형태로 리턴
(쿼리 스트링을 위 메서드들을 이용해 가공하지않고 값을 그대로 얻고 싶을때)
값을 변경하는 메서드
-> searchParams.set(key, value) : 인자로 전달한 key값을 value로 설정하는 메서드(동일한 key에 여러 value가 이미 존재하고 있었다면 set 메서드를 호출하면서 설정한 값 외에는 삭제)
-> searchParams.append(key, value) : 기존 값을 변경하거나 삭제하지 않고 추가하는 방식으로 동작하는 메서드

serarchParams를 변경하는 메서드를 이용해서 searchParams의 값을 변경하더라도 실제 url의 쿼리 스트링은 변경되지 않는다. 실제 쿼리 스트링을 변경시키려면 setSearchParams함수에 searchParams를 인자로 전달하면서 호출해야 한다.