[React] Axios paramsSerializer

API 통신을 하다보면 Optional한 값과 함께 Params를 보내야 하는 경우가 있다.

처음에는 삼항등 조건문으로 구별했었는데 가독성도 안좋아지고, State로 초기값과 함께 관리될때 초기값이 Params에 낑겨 들어가서

에러를 발생시키곤 했다.

 

바로 그럴 때 Axios paramsSerializer를 사용하면 된다

 

// 공통 axios 파일
axios.defaults.paramsSerializer = (params) => {
  let query = "";
  forEach(params, (value, key) => {
    if (value === "" || value === null || value === undefined) {
    } else {
      if (Array.isArray(value)) {
        map(value, (arrItem) => {
          query = query + key + "=" + arrItem + "&";
        });
      } else {
        query = query + key + "=" + value + "&";
      }
    }
  });

  const result = query.slice(0, -1);

  return result;
};

 

받은 params를 본인이 원하는대로 custom하게 사용하면 된다.

나의 경우 params에 배열이 있을 경우 배열을 가공하는 부분을 추가로 작성해 두었다.

 

https://axios-http.com/docs/req_config