useQuery 훅을 사용하여 데이터를 가져오고 캐싱하는 로직을 구현하다가 리팩토링을 하게 되어 기록으로 남겨본다.

useQuery는 React Query 라이브러리의 일부로서, 데이터를 관리하고 최적화된 캐싱과 리프레시 로직을 제공하고 이 훅은 cacheKey, fetchFlagshipMenus, 그리고 옵션 객체를 인자로 받아 사용한다.

👩🏻‍💻 What is the problem?

URL을 사용하여 메뉴 데이터를 가져오는 비동기 함수를 만들고, 만들어진 함수는 fetchApi 함수를 호출하여 API 요청을 수행한다.
여기서 추가 작업을 해야했던 건 현재 location을 받아와 원하는 코드값이 있을 경우 코드값을 얻은 뒤 새로운 API에 해당 코드값을 넣어서 호출해야 했다.

📌 처음 짠 로직

React HOOK useQueryParam 이용

import { useQueryParam } from 'use-query-params';

const api = () => {
  const getCookie = 얻어야 했던 getCookie;
  const [selectedCode] = useQueryParam('getCode');


  // selectedCode 있을경우 파라미터 추가 후 요청
  const url = `${origin}${pathname}
    ?getCookie=${getCookie}${
    selectedCode ? `&selectedCode=${selectedCode}` : ''
  }`;

  // ... 이하생략
};

useXX hook을 쓰면 url에서 state 의 변경점을 캐치해서 api 를 다시 호출 할 수 있는 장점이 있지만 이 hook 이 탈 때 URL 객체 + URLSearchParams 객체를 활용해 url 을 만들어 호출하면 훨씬 더 명료하다는 리뷰를 받아 수정하게 되었다.

📌 두번째로 짠 로직

Javascript URLSearchParams 이용

const api = () => {
  const getCookie = 얻어야 했던 getCookie;
  const urlParams = new URLSearchParams(window.location.search);
  const selectedCode = urlParams.get('getCode');
 
  // selectedCode 있을경우 파라미터 추가 후 요청
  const url = `${origin}${pathname}
    ?getCookie=${getCookie}${
    selectedCode ? `&selectedCode=${selectedCode}` : ''
  }`;

  // ... 이하생략
};

URL 객체 + URLSearchParams 객체를 활용해 url 을 만들어 호출하였지만 selectedCode가 존재할 때 조건부로 파라미터를 추가하는 부분은 복잡한 문자열 내부에서 처리되고 있어 유지보수가 어려울 것 같다는 판단을 하였다.

📌 세번째로 짠 로직

Javascript URLSearchParams 이용

const api = () => {
  const getCookie = 얻어야 했던 getCookie;
  const urlParams = new URLSearchParams(window.location.search);
  const selectedCode = urlParams.get('getCode');
 
// NOTE selectedCategory1DepthCode 있을경우 파라미터 추가 후 요청
  const queryParams = {
    getCookie: getCookie,
    ...(selectedCode && { selectedCode }),
  };
  const queryString = new URLSearchParams(queryParams).toString();
  
  const url = `${origin}${pathname}?${queryString}`;

  // ... 이하생략
};

조건부로 쿼리 파라미터를 추가하는 부분은 객체를 사용한 딕셔너리 병합 방식을 통해 명시적으로 처리하였다. 그리고 URL 생성 코드가 한 번만 등장하기에 유지보수가 더 쉬워졌다.

코드를 구조화하고 명확한 패턴을 사용하여 가독성을 높이는 것은 좋은 코드 작성의 중요한 부분인듯!!