Intersection Observer API를 사용해 뷰포트를 모니터링하는 컴포넌트 만들기

이전에 offset 기반 무한스크롤을 구현했을 때는 스크롤 이벤트를 사용해서 뷰포트를 감지하고 데이터를 추가로드하도록 했었는데, 자바스크립트 문서를 쭉 읽어보다가 페이지 내에 각 요소가 각각의 목적(광고, 레이지 로딩, 무한 스크롤 등)의 이유로 scroll 이벤트를 리스닝하기 때문에 이에 상응하는 콜백이 무수히 실행될 수도 있고 이는 메인 스레드에 큰 부하를 줄 수 있다는 것을 알게 되었습니다.

 

그래서 다른 구현 방법을 알아보다가 타겟 요소와 뷰포트의 교차점을 비동기적으로 관찰해서 요소가 뷰포트에 포함되는지 아닌지 구별하는 기능을 제공하는 Intersection Observer API를 알게 되었습니다. 스크롤 이벤트와 비교했을 때 throttling/debouncing이 불필요하다는 점, 비동기 처리로 메인 스레드 블로킹을 방지할 수 있다는 점, 리플로우를 최소화시킨다는 점이 장점이었기에 이것을 사용해서 뷰포트를 모니터링하는 컴포넌트를 만들게 되었습니다.

 

먼저 observerElement라는 ref를 생성해서 관찰할 DOM 요소를 참조하고, useEffect로 상태를 감지하고 추가 로드를 처리했습니다.

type Props = {
	isLoadingInitial: boolean;
	isLoadingMore: boolean;
	children: React.ReactNode;
	loadMore: () => void;
}

 

새로운 IntersectionObserver 인스턴스를 생성하고, 관찰자에게 사용할 콜백 handleIntersection과 설정을 전달합니다. Intersection Observer가 감지한 엔트리들을 순회하면서 조건을 만족할 경우 loadMore 함수를 호출합니다.

• 뷰포트를 기준으로, 100px 여유를 두어 뷰포트에 가까워졌을 때 로드가 시작되는데 요소의 일부라도 보일 경우 콜백이 호출되도록 설정했습니다.
• observerElement가 현재 존재한다면 이를 관찰하게 설정했고, 컴포넌트 언마운트 시 observer의 관찰을 중지하도록 합니다.

의존성에는 isLoadingMore, isLoadingInitial, loadMore을 담아서 필요할 경우에만 useEffect가 실행되도록 했습니다.

export default function InfiniteScroll({ isLoadingInitial, isLoadingMore, children, loadMore }: ScrollProps) {
  const observerElement = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    function IntersectionAPI(entries: IntersectionObserverEntry[]) {
      entries.forEach((entry) => {
        if (entry.isIntersecting && (!isLoadingMore || !isLoadingInitial)) {
          loadMore();
        }
      });
    }

    const observer = new IntersectionObserver(IntersectionAPI, {
      root: null,
      rootMargin: "100px",
      threshold: 0,
    });

    if (observerElement.current) {
      observer.observe(observerElement.current);
    }
    return () => observer.disconnect();
  }, [isLoadingMore, isLoadingInitial, loadMore]);

  return (
    <>
      {children}
      <div ref={observerElement} id="obs">
      </div>
    </>
  );
}

{children} 의 값들이 쭉 스크롤 되다가 ref가 걸린 <div>에 닿으면 observerElement가 실행되도록 했습니다.

data fetching 하는 함수는 zustand를 사용해서 전역에서 상태 관리 중이었는데, 무한 스크롤을 구현하면서 tasks, currentPage, hasMore 항목을 추가했습니다.

사용할 fetchTaskToday에 매개변수로 page를 주었고, 기본값은 0입니다.

export const useTaskStore = create<TodoState>(set => ({
  tasks: [],
  currentPage: 0, 
  hasMore: true,

  fetchTaskToday: async (page: number = 0) => {
    const startDayTime = new Date()
    startDayTime.setHours(0, 0, 0, 0)
    startDayTime.setHours(startDayTime.getHours() + 9)

    const endDayTime = new Date()
    endDayTime.setHours(23, 59, 59, 999)
    endDayTime.setHours(endDayTime.getHours() + 9)

    const supabase = createClient()
    const { data, error } = await supabase
      .from('todolist')
      .select('*')
      .gte('due_date', startDayTime.toISOString())
      .lte('due_date', endDayTime.toISOString())
      .range(page * 20, (page + 1) * 20 - 1)

    if (error) {
      console.error('Fetching today task ERROR:', error)
      return
    }

    if (data) {
      const tasks: Task[] = data as Task[]

      set(state => ({ 
        tasks: page === 0 ? tasks : [...state.tasks, ...tasks],
        hasMore: tasks.length > 0 && tasks.length === 20, 
        currentPage: page,
      }))
    }
  },
  ...
  }))

먼저 페이지네이션을 위해 range 메소드로 각 페이지의 20개의 항목만 가져오도록 설정합니다.

그리고 set 함수를 사용해 Zustand의 상태를 업데이트했습니다.

• tasks로 기존 태스크 목록을 유지하고 이후 페이지에 대한 새로운 태스크를 추가했습니다.
• hasMore는 태스크 수가 20인 경우 true로 설정되어 추가 데이터가 더 있는지를 나타냅니다.
• currentPage를 업데이트하여 현재 페이지를 추적하도록 했습니다.

무한 스크롤을 구현할 컴포넌트에서 useTaskStore에서 선언한 tasks, fetchTaskToday, currentPage, hasMore을 가져왔고

useState로 isLoadingMore을 관리하도록 하면서 InfiniteScroll 컴포넌트에 props로 내려줄 isLoadingMore={} 에 할당해주었습니다.

  const tasks = useTaskStore(state => state.tasks)
  const fetchTaskToday = useTaskStore(state => state.fetchTaskToday)
  const currentPage = useTaskStore(state => state.currentPage)
  const hasMore = useTaskStore(state => state.hasMore)
  const [isLoadingMore, setIsLoadingMore] = useState(false)

  useEffect(() => {
    const loadTasks = async () => {
      if (!hasMore) return

      setIsLoadingMore(true)
      await fetchTaskToday()
      setIsLoadingMore(false)
    }
    loadTasks()
  }, [fetchTaskToday, hasMore])
    const loadMoreTasks = async () => {
   if (!hasMore || isLoadingMore) return

   setIsLoadingMore(true)
   await fetchTaskToday(currentPage + 1)
   setIsLoadingMore(false)
 }

컴포넌트에 마운트 되었을 때 fetchTaskToday()를 호출하도록 했습니다.

그리고 hasMore과 isLoadingMore 둘 중 하나라도 false라면 return 하도록 하면서 둘다 만족한다면 fetchTaskToday에 페이지를 넘겨서 호출하도록 하는 함수를 작성하고 InfiniteScroll 컴포넌트의 props로 내려주도록 해서 스크롤이 바닥에 도달했을 때 추가 데이터를 로드하도록 했습니다.

<InfiniteScroll isLoadingInitial={false} isLoadingMore={isLoadingMore} loadMore={loadMoreTasks}>
   {tasks.map(task => (
      <TodoItem
         key={task.todo_id}
         task={task}
         viewTaskBtn={viewTaskBtn}
         checkTask={checkingBox}
         checked={!!checkedTask[task.todo_id.toString()]}
        />
          ))}
        </InfiniteScroll>

이렇게 IntersectionObserver를 사용하여 레이아웃 변화에 대한 성능 부담을 줄이고, 클라이언트의 부하를 최소화하는 스크롤 감지 컴포넌트를 구현했습니다.

구현 전 모습에서는 처음 페이지가 로드되었을 때 모든 데이터를 한번에 가져옵니다.

구현 전 (모바일)

 

구현 후, 스크롤바를 보면 rootMargin 설정으로 인해 바닥의 닿기 전에 데이터를 추가로 가져오는 것을 볼 수 있습니다.

구현 후