React TypeScript Zustand Infinite Scroll with IntersectionObserver

💡 기존 식상한 페이지 처리를 유튜브 댓글과 비슷하게 무한 스크롤로 구현하였고 이는 오직 Zustand 와 IntersectionObserver를 사용하였습니다.

Zustand Setting

댓글 리스트를 관리할 개체들과 요청에 대한 플래그들을 선언했습니다. 이미 댓글을 불러오는 중 혹은 다음에 불러올 댓글 리스트가 없다면 요청을 멈춰야 합니다. 또한 전역으로 상태를 관리하기 때문에 페이지가 옮겨졌을 때 댓글 리스트를 비워야 함으로 다음과 같은 Store가 만들어집니다.

import { create } from 'zustand';
import { APICommentType, BoardCommentType } from '../type/BoardType.ts';
import { client } from '../common/axios.ts';

interface CommentStoreType {
	// 댓글 리스트 State
  commentList: BoardCommentType[];
  // 현재 어떤 페이지인지 관리
  page: number;
  // 댓글을 불러오는중 인지 아닌지
  isFetching: boolean;
  // 다음 페이지가 있는지 없는지
  hasNextPage: boolean;
  // 게시물 변경 시 댓글 리셋 함수
  resetComment: () => void;
  // 댓글 요청 API
  getCommentList: (boardId: string, page: number) => void;
}

export const CommentStore = create<CommentStoreType>(set => ({
  commentList: [],
  page: 0,
  isFetching: false,
  hasNextPage: true,
  resetComment: () =>
    set(() => ({ commentList: [], page: 0, isFetching: false, hasNextPage: true })),
  getCommentList: (boardId: string, page: number) => {
	  // Fetching On
    CommentStore.setState(() => ({ isFetching: true }));
    client.get<APICommentType>(`boardComment/${boardId}?page=${page}&size=10`).then(res => {
	    // 댓글 없으면
      if (res.findBoardCommentDtos.length === 0) {
        CommentStore.setState(() => ({ hasNextPage: false }));
      } else {
        CommentStore.setState(store => ({
          page: store.page + 1,
          commentList: [...store.commentList, ...res.findBoardCommentDtos],
          isFetching: false,
          hasNextPage: true,
        }));
      }
    });
  },
}));

Infinite Scroll

해당 페이지의 스크롤을 계속 추적하는 건 리소스 낭비가 있다고 생각하여 IntersectionObserver를 사용했습니다. 페이지를 둘러보던 중 Target Component를 발견 시 다음 댓글 리스트를 불러오도록 감시했으며 isFetching, hasNextPage를 사용해 API 요청을 분기 처리했습니다.

import styled from '@emotion/styled';
import Comment from './Comment';
import { MutableRefObject, useEffect, useLayoutEffect, useRef } from 'react';
import { CommentStore } from '../../../store/CommentStore.ts';

function PostComment({ boardId }: { boardId: string }) {
  const { commentList, page, isFetching, hasNextPage, resetComment, getCommentList } =
    CommentStore();
  const targetRef = useRef() as MutableRefObject<HTMLDivElement>;

  const io = new IntersectionObserver(entries => {
    entries.forEach(({ target, isIntersecting }) => {
    // target 존재 여부 및 요소가 보여지고 있는지 확인
      if (target && isIntersecting) {
        getCommentList(boardId, page);
      }
    });
  });

  useLayoutEffect(() => {
	  // targetRef 활성화 시 감시 시작
    if (targetRef.current) {
      io.observe(targetRef.current);
    }
    // 페이지 나가면 감시 종료
    return () => io.disconnect();
  }, [io]);

  // 페이지 변경 시 댓글 리셋
  useEffect(() => resetComment(), [boardId]);

  return (
    <CommentWrap>
      {commentList.map(cl => {
        return <Comment key={cl.boardCommentId} comment={cl} />;
      })}
      {!isFetching && hasNextPage && <Target ref={targetRef} />}
    </CommentWrap>
  );
}

const CommentWrap = styled.div`
  width: 100%;
`;

const Target = styled.div`
  height: 1px;
`;

export default PostComment;

촬영을 위해 로드 속도에 2초 감속하였습니다.