[React] qs 라이브러리 사용하기

qs 설치

npm i qs

$ yarn add qs

qs는 쿼리스트링을 파싱하거나, 스트링화하는 간편한 외부 라이브러리이다.

 

쿼리스트링이란,

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

 

형식

엔드포인트 주소 이후 '?'을 쓰는 것으로 쿼리스트링이 시작함을 알려준다.
parameter = value 로 필요한 파라미터 값을 할당한다.

마치 필터값(코드값)을 보낼 때처럼,
파라미터를 여러개를 보내야할 때는 &를 붙여 여러개의 파라미터를 넘길 수 있다.

 

endpoint.com/?param=value1&param=value2

 

배열 파라미터를 서버에 요청하는 것은 각 프로젝트마다 정해진 규약이 있고, 몇가지 규약의 예시는 아래와 같다.

 

/?a[]=seoul&a[]=busan
/?a=seoul&a=busan
/?a=seoul+busan (특정 문자로 쭉연결)

 

 

---

 

http://localhost:3000/about?detail=true 주소로 들어갔을 경우

import React from 'react';
import qs from 'qs';

const About = ({ location }) => {
  const query = qs.parse(location.search, {
    ignoreQueryPrefix: true
    // 문자열 맨 앞의 ?를 생력
  });
  const showDetail = query.detail === 'true';
  // 쿼리의 파싱 결과 값은 무조건 문자열
  return (
    <div>
     <h1>소개</h1>
     {showDetail && <p>detail 값을 true로 설정하셨군요!</p>}
    </div>
  );
}