[React] Query String

김zunyange·2023년 3월 24일

1. Query String(쿼리스트링)

사용자가 입력 데이터를 전달하는 방법 중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.

http://www.example.com/path?키1=값1&키2=값2&키3=값3

일반적으로 URL을 통한 정보요청은 비교적 단순한 형태로 이루어져 왔다. React를 통해 구현한 웹 애플리케이션을 예시로 보면,

/ URL을 통해서 접속하면 메인 페이지를 요청
/list URL을 통해서 접속하면 리스트 페이지를 요청
/detail/ URL을 통해서 접속하면 상세페이지를 요청하는 것처럼
내가 어떤 페이지를 보고 싶다는 단순한 정보만 URL을 통해서 표현할 수 있었다.

URL에 따라서 다양한 응답을 제공해주는 백엔드 API도 마찬가지로,
/signin API를 호출하면 로그인에 대한 응답을,
/products API를 호출하면 상품들에 대한 정보를,
/product API를 호출하면 단일 상품에 대한 정보를 응답해주는 것처럼
특정 리소스에 대한 정보를 얻고자 한다는 단순한 형태의 요청만 URL을 통해서 할 수 있었다.

하지만 조금 더 규모가 크고 복잡한 애플리케이션에서는 단순한 형태의 요청만으로는 충분하지 못하거나 비효율적일 수 있다. 예를 들어, 우리 애플리케이션에서 취급하는 상품의 종류가 1억 개가 넘어가는 상황일 때, /list 페이지로 유저가 접속했을 때 1억 개의 상품 종류를 모두 보여주는 것은 비효율적이다. 왜냐하면 1억 개의 상품에 대한 정보를 모두 가져와야 하기 때문에 시간이 오래 걸리고, 실제 유저는 판매량순으로 상위 10개, 최신순으로 상위 10개, 리뷰 평점순으로 상위 10개처럼 더 정렬되고 특정된 형태의 정보를 보고싶어하기 때문이다.

이런 상황에서 우리는 단순히 “상품 리스트를 보여줘”가 아니라 “상품 리스트를 최신순으로 상위 10개만 보여줘” 처럼 구체적으로 요청을 할 수 있어야 한다. 이때 활용할 수 있는 것이 쿼리 스트링이다.

1-1. 쿼리 스트링의 형태

(출처 : https://www.semrush.com/)

예를 들어, products에 대한 정보를 얻고 싶은데 인기순으로 정렬된 정보를 얻고 싶다는 것을 쿼리 스트링을 통해서 표현한다면 아래와 같은 형태가 된다.

https://www.example.com/products?sort=popular

https://www.example.com/products 로 요청을하면서 ? 문자를 이용해 여기서부터는 쿼리 스트링을 나타낸다는 것을 표시해주고,
그 뒤에 key=value 형태의 문자열로 요청하고자 하는 부가적인 정보를 표현했다.
쿼리 스트링에서 표현할 수 있는 key=value 페어의 개수에 제한은 없다.
여러 개의 key=value 페어를 표현 할 때는 각 key=value 페어를 구분하는 표시가 필요한데 이를 위해서 &문자를 사용한다.

2. react-router-dom에서 쿼리 스트링의 사용

동적 라우팅처럼 Route 컴포넌트에 별도의 설정을 해줘야할까?
: 쿼리 스트링은 요청하고자 하는 URL에 부가적인 정보를 포함하기 위해서 사용하기 때문에 필요 없다.

2-1. 라우팅 방법

Link 컴포넌트 : <Link to="/list?sort=popular" />
useNavigate : navigate("/list?sort=popular")
쿼리 스트링을 포함한 주소로 이동하더라도 실제 보여지는 컴포넌트는 쿼리 스트링의 시작점인
? 전에 적힌 path(/list)에 해당하는 컴포넌트가 보여진다.