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

 

최근 프로젝트에서 날씨 정보를 사용자들에게 제공하기 위해 행정 구역 데이터와 오늘, 이번 주 날씨 데이터를 가져와 화면에 표시하는 기능을 구현했습니다. 이 과정에서 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`를 활용했습니다. (아직 까지도 어려움)

 

깨달은 점 ❕

가독성

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

재사용성

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

 

회고 🧐

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

 

 

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