왜 이렇게 고쳤는가?

무한 스크롤은 사용자 경험을 향상시키는 인기 있는 기능입니다. 기존 구현 방식에서는 성능과 관리가 복잡한 문제가 있을 수 있으며, 이를 해결하기 위해 Intersection Observer를 활용한 새로운 리팩토링을 진행하였습니다. 주요 변경 사항은 다음과 같습니다:

• 성능 최적화: Intersection Observer를 사용하면 스크롤 이벤트 리스너보다 효율적으로 스크롤 위치를 감지할 수 있으며, 성능을 향상시킵니다.
• 코드 재사용성 향상: Hook으로 분리함으로써 다양한 컴포넌트에서 쉽게 재사용할 수 있습니다.
• 가독성과 유지보수성 증진: 복잡한 논리를 단일 Hook으로 추상화하면 코드의 가독성과 유지보수성이 크게 향상됩니다.

작성 코드 및 설명

Intersection Observer 설정

Intersection Observer는 특정 요소가 뷰포트와 교차할 때 알림을 제공합니다. 여기서는 무한 스크롤을 위해 마지막 요소의 교차를 감지합니다.

const intersectionOptions = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 0.5,
};

const intersection = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      observer.disconnect();
      if (hasNextPage) {
        fetchNextPage();
      }
    }
  });
}, intersectionOptions);

요소 감시 함수

observeElement 함수는 지정된 요소를 감시하기 위해 Intersection Observer에 추가합니다.

const observeElement = (element: Element | null) => {
  if (element) {
    intersection.observe(element);
  }
};

클린업 로직

useEffect를 사용하여 컴포넌트가 언마운트 될 때 Observer 연결을 끊습니다. 이렇게 하면 메모리 누수를 방지할 수 있습니다.

useEffect(() => {
  return () => {
    intersection.disconnect();
  };
}, []);

결론

이 리팩토링을 통해 무한 스크롤 기능을 효율적이고 깔끔하게 구현할 수 있게 되었습니다. Intersection Observer의 활용은 성능 문제를 완화시키고 코드 재사용성을 높이는 좋은 예입니다. 이 패턴은 현대 웹 개발에서 자주 사용되며, 여러 프로젝트에 적용할 수 있는 훌륭한 리팩토링 사례입니다.