카카오테크캠퍼스 2기 | STEP2 | 13일차(24-07-10) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 13일차(24-07-10) 회고

📝 함수 추상화

• API 호출 로직이 컴포넌트에 결합되어 재사용성이 떨어졌다.

const { data, isLoading, error } = useQuery<{ products: ProductData[] }>(
  ['rankingProducts', filterOption],
  () => fetchRankingProducts(filterOption),
  { keepPreviousData: true },
);

---

• 개선 코드: useFetchRankingProducts라는 커스텀 훅을 API 파일에 정의하여 useQuery 로직을 캡슐화하였다. 

// api.js
export const useFetchRankingProducts = (filterOption) => {
  return useQuery<{ products: ProductData[] }>(
    ['rankingProducts', filterOption],
    () => fetchRankingProducts(filterOption),
    { keepPreviousData: true }
  );
};

// component.js
const { data, isLoading, error, isFetching } = useFetchRankingProducts(filterOption);

 

📝 isFetching 속성 

• 초기 로딩 외에 데이터 갱신 중에는 사용자에게 명확한 피드백을 제공하지 못했다.

  if (isLoading) {
    return <Loading />;

---

• 개선 코드: isLoading은 초기 로딩 시에만 사용하고, 데이터 갱신 중에는 isFetching 속성을 사용하여 로딩 메시지를 표시하도록 하였다.

if (isLoading) {
  return <Loading />;
} else if (isFetching) {
  return <Loading message="데이터를 갱신하는 중입니다..." />;
}

 

📝 로딩 및 에러 처리 UX 개선

• 로딩, 데이터 없음, 에러 발생 시의 처리가 한번에 이루어졌다.

  if (error || !data || !Array.isArray(data.products) || data.products.length === 0) {
    return <NoData />;
  }

---

• 개선 코드
  • 로딩 중: 로딩 메시지를 표시하여 사용자에게 현재 상태를 전달하였다.
  • 데이터 없음: "데이터가 없습니다. 다른 필터를 선택해보세요."와 같은 안내 메시지를 추가하여 사용자에게 다음 행동을 제시하였다.
  • 에러 발생: 에러 메시지를 구체적으로 표시하고, 새로고침 버튼을 제공하여 사용자가 문제를 해결할 수 있도록 돕는 Error 컴포넌트를 사용하였다.

if (error) {
  return <Error message={error.message} onRetry={() => refetch()} />;
}

if (!data || data.pages.length === 0) {
  return <NoData message="데이터가 없습니다. 다른 필터를 선택해보세요." />;
}

 

📝 Daily Scrum 이후

• STEP1 PR 리뷰 반영
• STEP2 진행 및 PR

 

😋 Today 회고

• 멘토링을 통해 Axios 라이브러리에 대한 이해를 높이고, 현재 학습 방향 대한 피드백을 얻었다. 특히 JavaScript 기초 학습의 필요성을 재확인하고, 이를 보완해야 함을 인지하였다. 

 

➡️ 참고 링크

https://velog.io/@himprover/React-query-%EC%97%90%EC%84%9C-isLoading%EC%9D%B4%EB%9E%91-isFetching%EC%9D%80-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%B4%EC%A7%80

React-query 에서 isLoading이랑 isFetching은 뭐가 다르지?