🥞 오늘 한 일

• 넥스트 개인과제
  • 해설 기반 리팩토링 완료
  • isError일 경우 UI 추가
  • 무한 스크롤 useEffect 코드 이해

넥스트 개인과제

isError일 경우 UI 추가

// PokemonList.tsx
if (isError) {
  return (
    <div className="text-center mt-9">
      <p className="text-3xl mt-5">
        포켓몬을 데려오는 동안 오류가 발생했습니다.
      </p>
    </div>
  );
}

큰 기능을 추가하거나 한 건 아니었지만, 이런 디테일한 부분을 자주 놓치는 것 같아서 신경 써서 추가했다.

무한 스크롤 useEffect 코드 이해

이번에 무한 스크롤 기능을 제작하면서 useEffect를 사용한 부분에 대해서 이해가 잘 안 됐는데, 때문에 해당 코드를 살펴보고 찾아보며 이해를 시도했다. 이해한 내용은 코드 내에 작성했다.

// PokemonList.tsx
  useEffect(() => {
    // IntersectionObserver는 특정 요소가 뷰포트 내에 들어왔는지 감시하는 객체.
    // entries는 마시하고 있는 요소들의 배열.
    // isIntersecting 속성은 요소가 뷰포트에 들어왔는지를 나타낸다.
    // hasNextPage를 통해 다음 페이지 존재 여부를 나타내고, 두 조건이 충족되었다면 fetchNextPage를 통해 다음 페이지의 데이터를 불러온다.
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasNextPage) {
          fetchNextPage();
        }
      },
      // 요소가 100% 뷰포트에 들어왔을 때 콜백이 실행되도록 한다.
      { threshold: 1.0 }
    );

    // 검사할 요소 설정. loadMoreRef는 무한 스크롤의 트리거가 되는 DOM 요소를 가리킨다.
    if (loadMoreRef.current) {
      // 해당 요소가 뷰포트에 들어오는지를 감시하도록 설정한다.
      observer.observe(loadMoreRef.current);
    }

    // 클린 업 함수. 컴포넌트가 언마운트되거나 useEffect가 다시 호출될 때 감시를 중지한다.
    return () => {
      if (loadMoreRef.current) {
        observer.unobserve(loadMoreRef.current);
      }
    };
  }, [fetchNextPage, hasNextPage]);