JavaScript Axios get 쿼리스트링 요청하기 (URLSearchParams)

"new URLSearchParams()" 는 URL의 쿼리 파라미터를 다루기 위한 JavaScript 내장 클래스로, 이 클래스를 사용하면 URL의 쿼리 파라미터를 쉽게 다룰 수 있다.

주요 기능

• append(): 쿼리 파라미터 추가
• delete(): 쿼리 파라미터 제거
• get(): 쿼리 파라미터 값 가져오기
• has(): 쿼리 파라미터가 존재하는지 확인
• set(): 쿼리 파라미터 값 변경
• toString(): 쿼리 파라미터를 문자열로 변환

const searchParams = new URLSearchParams('q=apple&category=food&count=1');

// 쿼리 파라미터 값 가져오기
console.log(searchParams.get('q')); // "apple"

// 쿼리 파라미터 추가
searchParams.append('color', 'pink');

// 쿼리 파라미터 변경
searchParams.set('count', '5');

// 변경된 쿼리 파라미터를 문자열로 변환
const queryString = searchParams.toString(); // "q=apple&category=food&count=5&color=pink"

작성한 코드

유저 리스트를 가져오는 API가 있다고 가정했을때, URLSearchParams를 아래와 같이 사용할 수 있다.

const GET_USER_LIST = (paramsObject) => {
  // URLSearchParams 객체를 생성
  const params = new URLSearchParams();

  // paramsObject의 속성들을 순회하며 key와 value를 추출해 
  Object.entries(paramsObject).forEach(([key, value]) => {
    // params 객체의 쿼리 매개변수로 추가
    params.append(key, value);
  });

  // params 객체의 쿼리 매개변수를 문자열로 반환해 get요청을 보낸다.
  return axios.get(`/user/list?${params.toString()}`);
};

URLSearchParams의 인코딩

쿼리 파라미터의 값으로 숫자와 문자를 하나씩 append 한 후, toString으로 변환한 값을 찍어보면 append 한 숫자는 그대로지만 문자는 인코딩 된 걸 확인할 수 있다.

const params = new URLSearchParams();

params.append('number', 5);
params.append('string', '안녕');

console.log(params.toString()); // "number=5&string=%EC%95%88%EB%85%95"

URLSearchParams는 URL에서 사용할 수 있는 형식으로 데이터를 인코딩 하기 때문에 한글이나 특수 문자와 같이 URL에 사용할 수 없는 문자는 자동으로 인코딩되어 '%'와 16진수로 변환이 된다.