배경

• 현재 진행 중인 프로젝트에서, API 호출을 통해 받아온 목표리스트 데이터들을 캘린더 내에 렌더링하는 컴포넌트가 존재한다.
• 이때 데이터는 캘린더 내에서 월 별로 호출하는데, 이미 불러왔던 데이터들도 다시 API 호출을 중복해서 요청하는 상황이 발생하였다.
• 이미 불러온 데이터들은 캐시를 통해 API 호출을 최소화하고, useState와 useEffect로만 구현하다보니 방대해진 코드를 개선하기 위해 이 마이그레이션을 진행하게 되었다.

설계

• 시나리오를 아래와 같이 작성한 뒤, 마이그레이션을 진행하였다.

1. useQuery를 활용하여 연-월 별 데이터 호출
   1. ['monthlyData', currentMonth] 쿼리키로 지정
      1. MonthlyData 범주 하위, currentMonth는 지속적으로 변경되는 useState
      2. MonthlyData 하위에 여러 연-월 별 데이터를 캐싱 & API 재호출 방지

구현

• 아래와 같이 지속적으로 변경되는 연-월 변수는 useState를 통하여 관리하였다.
• 그리고 useQuery를 통해 쿼리 키 및 쿼리 함수, staleTime을 지정해주었다.
• 응답 데이터가 어떤 형태인지 코드만 보고 유추할 수 있도록 타입 지정을 해주었으며, 데이터가 유지되는 시간은 서비스 평균 사용시간을 고려하여 30분으로 지정해주었다.

  /** 현재 캘린더 내 보여지는 연-월 => 월 별 목표리스트 서버 호출 및 캘린더 내 리스트 렌더링 */
  const [currentMonthToRenderInCalendar, setCurrentMonthToRenderInCalendar] =
    useState<string>(convertDateToMonthString(new Date()));

  /** 캘린더 내 연-월에 해당하는 목표를 렌더링 하기 위한 useQuery 호출, [캐시 옵션: 30분] */
  const { data } = useQuery<{ code: number; data: ObjectQueryResult[] }>({
    queryKey: ["MonthlyData", currentMonthToRenderInCalendar],
    queryFn: () => handleRequestObjectList(currentMonthToRenderInCalendar),
    staleTime: 30 * 60 * 1000,
  });

• 그리고 응답 데이터를 아래처럼 캘린더에 넘겨주어, 리스트를 캘린더 내에 렌더링하도록 구현했다.

      <Calendar
		...
        tileContent={(object: TileContentInterface) => (
          <TileContent
            list={(data?.data ?? []).filter(
              (eachObject: ObjectQueryResult) =>
                eachObject.date === convertDateToString(object.date)
            )}
          />
        )}
      />

구현 결과물

• 초기 데이터는 API 호출을 통하여 렌더링하지만, 이후 호출하지 않고 캐시 데이터를 사용하는 것을 확인할 수있다.