[Tistory] 카카오테크캠퍼스 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 ; 개선 코드: isLoading은 초기 로딩 시에만 사용하고, 데이터 갱신 중에는 isFetching 속성을 사용하여 로딩 메시지를 표시하도록 하였다. if (isLoading) {
return ;
} else if (isFetching) {
return ;
} 📝 로딩 및 에러 처리 UX 개선 로딩, 데이터 없음, 에러 발생 시의 처리가 한번에 이루어졌다. if (error || !data || !Array.isArray(data.products) || data.products.length === 0) {
return ;
} 개선 코드 로딩 중: 로딩 메시지를 표시하여 사용자에게 현재 상태를 전달하였다. 데이터 없음: “데이터가 없습니다. 다른 필터를 선택해보세요.”와 같은 안내 메시지를 추가하여 사용자에게 다음 행동을 제시하였다. 에러 발생: 에러 메시지를 구체적으로 표시하고, 새로고침 버튼을 제공하여 사용자가 문제를 해결할 수 있도록 돕는 Error 컴포넌트를 사용하였다. if (error) {
return refetch()} />;
}

if (!data || data.pages.length === 0) {
return ;
} 📝 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은 뭐가 다르지? 주인님…. 그 자식은 가짜….. velog.io