[리팩토링] 커스텀 훅을 활용한 날씨 데이터 관리 구조 개선

 

최근 프로젝트에서 날씨 정보를 사용자들에게 제공하기 위해 행정 구역 데이터와 오늘, 이번 주 날씨 데이터를 가져와 화면에 표시하는 기능을 구현했습니다. 이 과정에서 UI와 데이터 관련 로직을 효과적으로 분리하기 위해 커스텀 훅을 도입했습니다.

 

구조 변경 이유 ✨

데이터 요청, 포맷팅, 상태 관리 등의 로직이 컴포넌트 내부에 존재해서 UI와 데이터 로직이 혼합되어 가독성이 떨어지고, 유지보수가 어려운 상황이 발생했습니다.

분리했을 때 이점

가독성 향상 : 컴포넌트가 UI에만 집중할 수 있어 코드의 가독성이 높아졌습니다.

유지보수 용이 : 데이터 로직을 커스텀 훅으로 분리하여, 각 기능을 독립적으로 수정하거나 확장할 수 있습니다.

재사용성 : 커스텀 훅을 다른 컴포넌트에서도 재사용할 수 있어 코드 중복을 줄였습니다.

 

구현 방식 📖

커스텀 훅 작성

useWeather 훅을 작성해 행정구역 데이터와 날씨 데이터를 가져오는 로직을 처리했습니다. 이 훅은 API 요청, 데이터 포맷팅, 상태 관리 등을 담당해 컴포넌트에서는 훅을 호출해 필요한 데이터만 가져옵니다.

export const useWeather = () => {
  const { center } = useLocationStore((state) => state.location);
  
  const { data: regionCodeData, isPending, refetch: refetchRegionCode } = useQuerys.useGetCoordRegionCodeQuery(center);
  const { data: todayWeatherData } = useQuerys.useGetTodayWeatherQuery(center);
  const { data: weeklyWeatherData } = useQuerys.useGetWeeklyWeatherQuery(center);
  
  const regionCode = useMemo(() => weatherFormatter.formattedRegionCode(regionCodeData), [regionCodeData]);
  const currentWeather = useMemo(() => weatherFormatter.formattedTodayWeatherData(todayWeatherData), [todayWeatherData]);
  const weeklyWeather = useMemo(() => weatherFormatter.formattedWeeklyWeatherData(weeklyWeatherData), [weeklyWeatherData]);

  useEffect(() => {
    if (center) {
      refetchRegionCode();
      refetchTodayWeather();
      refetchWeeklyWeather();
    }
  }, [center]);

  return {
    regionCode,
    isPending,
    currentWeather,
    weeklyWeather
  }
};

 

UI 컴포넌트

WeatherDisplay 컴포넌트는 useWeather훅을 호출해 필요한 데이터만 가져와 사용합니다.

const WeatherDisplay = () => {
  const { regionCode, isPending, currentWeather, weeklyWeather } = useWeather();

  if (isPending) return <h2>데이터가 없습니다.</h2>;

  return (
    <div>
      {/* UI 구성 */}
    </div>
  );
};

 

어려웠던 점 ❓

상태 관리 복잡

API 요청과 데이터 상태를 관리하는 과정에서, 여러 상태가 동시에 업데이트되는 상황이 발생했는데 특히 center값이 변경될 때마다 여러 데이터를 refetch 해야 돼서 상태의 일관성을 유지하는 것이 어려웠습니다. 그래서 useEffect를 활용했습니다. (아직 까지도 어려움)

 

깨달은 점 ❕

가독성

데이터 로직을 분리함으로써 가독성이 크게 향상된 것을 체감했습니다. 그래서 코드를 이해하고 수정하는 데 드는 시간이 줄어들었습니다.

재사용성

같은 로직을 여러 컴포넌트에서 재사용할 수 있어, 중복 코드를 줄이고 일관성을 유지하는데 큰 도움이 됐습니다.

 

회고 🧐

커스텀 훅을 통해 관련 로직을 분리함으로써 가독성 및 유지보수성을 크게 향상시킬 수 있었고, 이런 구조를 활용해 다른 프로젝트에서 활용해 유용하게 적용할 수 있을 것 같습니다.

 

 

아직 많이 부족하기 때문에 지금 작성한 코드도 잘 작성된 코드가 아닐 수 있습니다. 조언은 언제나 환영입니다~!!