쿼리 스트링(Query String)
쿼리 스트링은 URL의 한 부분으로, 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용한다
일반적으로 URL을 통한 정보 요청은 페이지명을 URL을 통해서 내가 어떤 페이지를 보고 싶다는 단순한 정보만을 표현할 수 있었는데 조금 더 규모가 크고 복잡한 애플리케이션에서는 단순한 형태의 요청만으로는 충분하지 못하거나 비효율적일 수 있다.
만약 상품의 종류가 무수히 많은 상황에서 상품리스트 페이지로 접속(이동)했을 때 모든 상품 종류를 보여주는 것은 비효율적이다. 로딩 시간도 오래걸릴뿐더라 사이트를 이용하는 사용자 입장에서도 특정된 형태의 정보를 보고 싶어하기 때문이다
이러한 상황에서 구체적인 요청을 할 수 있게 도와주는것이 쿼리 스트링이다
Query String의 형태(출처: https://www.semrush.com/)
- 쿼리스트링은
key=value형태의 문자열로 표현한다 - URL에서 쿼리스트링이 시작된다는 표시는
?문자를 통해서 표현한다 - 쿼리 스트링 내에서 각각의 key=value페어를 구분할때는
&문자를 사용한다
react-router-dom 에서의 쿼리스트링
쿼리스트링을 포함해서 Routing하기
react-router-dom에서 쿼리 스트링을 활용하기 위해서는 사전에 Router 컴포넌트에 특별한 설정을 할 필요는 없다. 쿼리스트링은 요청하고자 하는 URL에 부가적인 정보를 포함하기 위해 사용하는것이다.
<Link to="list?sort=popular" />navigate("/list?sort=popular")
위 처럼 단순하게 Link 컴포넌트나 navigate 함수 인자에 쿼리스트링이 포함된 URL을 전달하면 된다. 쿼리스트링을 포함한 주소로 이동하더라도 실제 보여지는 컴포넌트는 쿼리스트링의 시작점인?전에 적힌 path에 해당하는 컴포넌트가 보여진다
컴포넌트에서 쿼리스트링값 가져오기
쿼리 스트링을 포함해서 Routing을 했다면 컴포넌트에서 쿼리스트링의 값을 가져올수 있어야 한다. react-router-dom에서는 쿼리스트링 값을 편하게 가져오고 state처럼 쿼리스트링의 값이 바뀌면 컴포넌트를 리렌더링 해주는 기능을 제공해 준다.
- useLocation hook
Location객체를 리턴한다. Location 객체는 현재 위치(URL)에 포함된 여러가지 정보를 가지고 있고 각각의 정보를 pathname, search, hash, state, key 등의 프로퍼티로 표현하고 있다.
Location객체의 state 프로퍼티 React의 state와는 다르다
쿼리스트링을 나타내는 프로퍼티 :search
import React from 'react';
import { useLocation } from 'react-router-dom';
const List = () => {
const location = useLocation();
const queryString = location.search;
return (
<section>
<h1>This is List Page</h1>
<p>
쿼리 스트링: <b>{queryString}</b>
</p>
</section>
);
};
export default List;쿼리 스트링에 대한 정보가 문자열 형태로 저장되어 있다. 원하는 값을 가져오려면 자바스크립트에서 parsing하는 과정을 거쳐야한다
- useSearchParams hook
useLocation hook에서 겪는 불편함을 없애기 위해 useSearchParams hook을 사용할 수 있다
쿼리 스트링에서 원하는 값만 얻어낼 수 있도록 다양한 메서드를 제공해 주는 URLSearchParams라는 객체가 있고 react-router-dom에서는 쿼리 스트링의 값을 이용해서 URLSearchParams 객체를 리턴해주는 useSearchParams라는 hook을 제공해주고 있다
useState와 비슷하게 배열의 형태로 searchParams와 setSearchParams 함수를 리턴해준다.
searchParams는 URLSearchParams 객체이며 URLSearchParams 객체는 쿼리 스트링을 다루기 위한 여러 편리한 메서드를 제공해 줍니다.
setSearchParams는 함수를 호출하면서 인자로 객체 또는 문자열을 넣어주면 현재 URL의 쿼리 스트링을 변경하는 기능을 제공해 줍니다. 컴포넌트 안에서 쿼리 스트링을 변경하고자 할 때 사용할 수 있습니다.
const [searchParams, setSearchParams] = useSearchParams();
- 값을 읽어오는 메서드
searchParams.get(key): 특정한 쿼리스트링의 key의 value값을 가져온다searchParams.get(key): 특정한 key에 부합하는 value가 두 개 이상일 경우라면 제일 먼저 나온 value만 반환한다searchParams.getAll(key): 해당 key에 해당하는 모든 value를 배열 형태로 반환한다searchParams.toString(): 쿼리스트링을 string 형태로 반환한다. searchParams는 객체여서 가공되지 않은 쿼리 스트링의 값을 그대로 얻고 싶다면 toString 메서드 호출
- 값을 변경하는 메서드
searchParams.set(key, value): 인자로 전달한 key 값을 value로 설정한다. 만약 동일한 key에 여러 value가 이미 존재하고 있었다면, set 메서드를 호출하면서 설정한 값 외에는 삭제됩니다.searchParams.append(key, value): 인자로 전달한 key 값을 value로 추가한다. set 메서드와는 다르게 기존의 값들을 변경하거나 삭제하지 않고 추가하는 방식으로 동작한다
searchParams를 변경하는 메서드를 이용해서 searchParams의 값을 변경하더라도 실제 URL의 쿼리 스트링은 변경되지 않습니다. 변경된 searchParams를 이용해서 실제 쿼리 스트링을 변경시키려면 setSearchParams 함수에 searchParams를 인자로 전달하면서 호출해야 합니다.
