리팩토링 일지: API fetch 함수를 선언적으로 작성하기

API 함수를 선언적으로 작성하기

사용자의 action에 의존하는 API는 그 action 함수 내부에서 fetch 되도록 리팩토링하였다.

왜 API fetch 함수의 위치를 변경했는가?

내가 담당한 목적지 리스트 페이지는 클릭과 같은 사용자의 행위(action)에 의존하여 업데이트되는 데이터가 많다. 실제로 내가 사용한 API 11개 중 6개가 클릭 이벤트가 발생했을 때 서버로 데이터를 요청하고 있다.

그러나 나는 API fetch 함수를 컴포넌트 내부에 독립적으로 선언하고 useEffect로 호출하도록 코드를 작성했다. 아래의 코드는 검색 키워드와 사용자가 선택한 카테고리로 검색 결과를 요청하는 API를 fetch한 것이다.

// API fetch 함수 선언
  const getCategorizedSearchingData = useCallback(async () => {
    const res = await getDestinationListByTitleAndCategoryId(
      selectedCategory,
      searchQueryParam
    );
    const totalData = res.data.total_count;

    ...

  }, [
    selectedCategory,
    searchQueryParam,
    setFilteredDestinations,
    isUserSearched
  ]);


// API fetch 함수 호출
  useEffect(() => {
    getCategorizedSearchingData();
  }, [getCategorizedSearchingData]);

따라서 이 action 함수에서 직접 fetch를 담당하도록 하여 유지보수가 쉽고 함수의 영향범위를 파악하기 편하도록 수정하였다.

	As Is	To Be
fetch 함수 위치	컴포넌트 내부에 일반 함수로 선언	사용자 action 함수의 내부에 선언
결과(기대 효과)	fetch 하여 받아온 데이터를 어디에서 다루고 있는지 쉽게 파악하기 어려움	함수의 영향범위와 코드의 흐름을 파악하기 쉽다.