[CREATE] Day9 이나경 79 네트워크 통신 custom hook 구현

[nakyoung98]

이 PR은 어떤 유형인가요?

• [x] 리팩터링
• [x] 기능
• [ ] 버그 수정
• [ ] 최적화
• [ ] 문서 업데이트

설명

async 함수를 다루는 useAsync 커스텀 훅

• 지연이 발생되는 활동을 할 때, 발생하는 행동들을 제어할 수 있음
• isLoading, isError, wrappedFunction 반환
  1. isLoading
• 네트워크 요청중 true
• 종료 혹은 에러발생시 false

2. isError

   • 에러발생시 true
   • 기본 false

3. wrappedFunction

   • useAsync의 param으로 전달받은 api 함수를 감싼 함수
   • param으로 api함수의 param에 맞는 인자를 전달
   • 성공적으로 완료 시 api 결과 값 반환

CardLazyGridContainer에 useAsync 훅 적용

• getCards 메소드 재구성

  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]
  );

  초기 데이터 14개가 중복으로 추가되는 문제 해결

• getCards가 비슷한 시점에서 두 번 중복으로 호출되면서 이레 부분에서 의도치 않게, 동일 데이터가 두 번 추가되었음 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]
  );

관련 티켓 및 문서

• Related Issue #79
• Closes #79

스크린샷, 녹화

변경사항을 테스트하는 방법, 테스트에 사용된 기기 및 브라우저, UI 변경에 대한 관련 이미지 등에 대한 지침을 이곳에 기재해 주세요.

UI 접근성 체크리스트

UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:

• [ ] Semantic HTML 구현?
• [ ] 키보드 조작이 지원?
• [X] axe DevTools를 사용하여 Critical 및 Serious 문제를 확인하고 해결했나요? => 해당 문제는 구현 디자인대로 하다보니 발생한 문제로 해결 불가능

[선택사항] 이 PR을 가장 잘 설명하는 GIF는 무엇인가요?