Closed nakyoung98 closed 8 months ago
isLoading
isError
wrappedFunction
const getCards = useCallback( async (nextCardIndex, limit) => { if (!hasNext) return; const firstLimit = nextCardIndex === 0 ? limit - 1 : null; const result = await wrappedFunction(nextCardIndex, firstLimit ?? limit); if (!result) return; const { newCardData, hasMore } = result; if (hasMore) { setNextCardIndex(nextCardIndex + limit); } else { setHasNext(false); } setCardDataList((prevData) => [...prevData, ...newCardData]); }, [hasNext, wrappedFunction] );
setCardDataList((prevData) => [...prevData, ...newCardData]);
useEffect(() => { //TODO: 실제 데이터 가져오기 getCards(nextCardIndex, limit); }, []);
const handleInfiniteLoadingObserver = useCallback( (entries) => { const target = entries[0]; if (target.isIntersecting) { getCards(nextCardIndex, limit); } }, [getCards, nextCardIndex, limit] );
변경사항을 테스트하는 방법, 테스트에 사용된 기기 및 브라우저, UI 변경에 대한 관련 이미지 등에 대한 지침을 이곳에 기재해 주세요.
UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:
이 PR은 어떤 유형인가요?
설명
async 함수를 다루는 useAsync 커스텀 훅
isLoading
,isError
,wrappedFunction
반환isLoading
isError
wrappedFunction
CardLazyGridContainer에 useAsync 훅 적용
초기 데이터 14개가 중복으로 추가되는 문제 해결
setCardDataList((prevData) => [...prevData, ...newCardData]);
관련 티켓 및 문서
스크린샷, 녹화
변경사항을 테스트하는 방법, 테스트에 사용된 기기 및 브라우저, UI 변경에 대한 관련 이미지 등에 대한 지침을 이곳에 기재해 주세요.
UI 접근성 체크리스트
UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:
[선택사항] 이 PR을 가장 잘 설명하는 GIF는 무엇인가요?