[Feat] 챗봇 무한스크롤 (커서 기반 페이지네이션)

[yellow-jam]

⚙️ 기능 설명

챗봇 컴포넌트에서 스크롤이벤트에 따라 과거의 채팅 이력을 보여주는 기능을 만듭니다.

• 최초 요청 시 가장 최신의 메시지 8개 표시
• 채팅창 스크롤을 위로 올릴 때마다 8개 메시지가 로딩됨

✅ To-do

• useInfiniteQuery 적용
• 스크롤이벤트 : 스크롤 위치 저장이 필요할까 -> x 매번 계산하도록 함
• 최초 실행 시(드로어를 처음 펼쳤을 때) 스크롤을 최하단으로 내리기
  • 코드 삽입할 위치를 못 정함. 최초 요청을 하기 전인지 구분하는 플래그를 사용해야 할 듯
• 상단에 작은 스피너 적용
• 화면 깜빡임 없앰

📑 참고 자료

• useInfiniteQuery 공식문서
  • 공식 문서 내용이 번역된 블로그 [react-query] useInfiniteQuery
• 간결한 설명 React-Query를-사용한-무한-페이지네이션

[yellow-jam]

무한스크롤 동작

_2024_10_25_22_53_44_511.mp4

[yellow-jam]

챗봇 아이콘 설정

[yellow-jam]

무한스크롤 - 커서 기반 페이징

페이지네이션 기법으로는 오프셋 기반 페이징, 커서 기반 페이징이 있습니다... (검색해보면 둘을 비교하는 좋은 글이 많이 있다.)
실시간 상태를 더 잘 반영하는 커서 기반 페이징 방식을 택하여, react-query에서 지원하는 useInfiniteQuery를 사용하여 구현해봅니다.

useInfiniteQuery 사용법

useInfiniteQuery를 기준으로 구조 분해 할당이 이루어지고 있습니다.

등호를 기준으로 왼쪽에서 꺼내 쓰고 있는 useInfiniteQuery의 반환값의 의미는 다음과 같습니다.

• data: queryFn의 반환값. 페이지 배열(data.pages)과 커서 배열(data.pageParams)을 포함하고 있습니다.
• fetchNextPage: queryFn 함수 그 자체. (사용자 이벤트 핸들러에서 호출합니다)
• isFetchingNextPage (boolean): queryFn이 실행 중이면 true
• hasNextPage (boolean) : getNextPageParam이 null 또는 undefined 이외의 값을 반환하는 경우 true. 그래서 getNextPageParam를 보면 백엔드가 보내준 hasNext 값을 검사하고 있습니다.

  const { data, fetchNextPage, isFetchingNextPage, hasNextPage }

오른쪽에 설정할 useInfiniteQuery의 속성의 의미는 이러합니다.

• querykey: 쿼리 구분자, 다른 변수값 전달
  • API request 구조를 보면 채팅방ID(chatRoomId)와 커서로 사용할 메시지ID(lastMessageId)를 요구합니다. queryFn이 호출될 때, 커서는 getNextPageParam 과정을 통해 내부적으로 pageParam 값이 전달되지만, 다른 변수(chatRoomId)도 보내야 해서 querykey: ['쿼리키이름', chatRoomId] 형식으로 작성했습니다. 이후 queryFn 동작 중에는 채팅방ID를 꺼내기 위해 배열 분해 할당이 이루어집니다.

const getChatList = async ({ queryKey, pageParam = '' }: QueryFunctionContext<string[], string>) => {
    const [, chatRoomId] = queryKey; 

• queryFn: 무한 페이지네이션을 수행하는 함수

  • 파라미터, 반환값 타입을 지켜 선언해야 합니다. (아래 댓글 참고)
  • fetchNextPage라는 이름으로 그대로 반환됩니다. (동일함)

• getNextPageParam: 다음 요청에 보낼 커서(pageParam)을 도출하는 콜백함수. 백엔드에서 보내준 hasNext(boolean)값을 검사하여 다음 페이지가 있는지 여부를 판단

  • 다음 페이지가 존재하면: 다음 커서(pageParam)가 될 값(메시지ID)을 반환
  • 다음 페이지가 없으면: 무효한 값을 반환

구현한 코드

// ChatbotBox.tsx

// 채팅 목록 무한스크롤: 커서 기반 페이징
  const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
    useInfiniteQuery({
      queryKey: [queryKeys.chatlist, chatRoomId],
      queryFn: getChatList,
      getNextPageParam: (lastPage) => {
        if (lastPage?.result?.hasNext) {
          const lastMessage = lastPage.result.allMessages[0];
          return lastMessage.messageId;
        }
        return null;
      },
      initialPageParam: '', // 최초 요청 시 pageParam을 빈 문자열로 설정 (최신 메시지 요청 시)
      enabled: !!chatRoomId, // chatRoomId가 있을 때만 쿼리 실행
    });

[yellow-jam]

queryFn에 들어갈 함수 선언 시 주의점

• 파라미터를 QueryFunctionContext<T> 타입으로 선언
• 매개변수 pageParam: 커서로 사용할 값 (마지막 메시지의 id)
• 반환값이 Promise여야 함. (response.data를 통째로 리턴)

// useConvert.tsx

  // api: get chat list / spring
  // (need fix) cursor-based-pagination
  const getChatList = async ({ queryKey, pageParam = '' }: QueryFunctionContext<string[], string>) => {
    const [, chatRoomId] = queryKey;

  try {
    const response = await axios.get(`/spring/chats/${chatRoomId}`, {
      params: {
        lastMessageId: pageParam || undefined, // 마지막 메시지 ID를 쿼리 파라미터로 전달
      },
    });

    const data = response.data;
    if (data.isSuccess) {
      return data; 
    } else {
      console.log(data.message);
      return data.false;
    }
  } catch (err) {
    console.log(err); // temporary error handling
  }
};

[yellow-jam]

기타 동작

(추가하는 중)

hasNext, hasPrevious를 두고 양방향 무한스크롤을 하는 방법도 있는데,
이전에 조회한 목록은 프론트 단에서 보관하고(messages 변수), hasNext로 더 오래된 채팅이 있는지만 검사하는 방식으로 정했다.

data.pages를 타입 변환하여 map해주는 flatMap 메소드가 신기하다.

      const messages: Message[] = data.pages
        .slice() // 원본 배열을 수정하지 않기 위해 복사
        .reverse() // 페이지 순서를 반대로 (오래된 페이지가 앞쪽으로)
        .flatMap((page: any) => {
          return page.result.allMessages as Message[];
        });

data.pages를 콘솔에 찍어보면 요청을 거듭할수록 이런 식으로 뒤에 추가된다... (예시는 숫자가 클수록 최신)
[ [10,11,12,13], [6,7,8,9], ... ]
[ [10,11,12,13], [6,7,8,9], [2,3,4,5], ... ]
백엔드와 메시지의 정렬 방향을 정할 때 next와 prev가 참 헷갈렸다.

• next: 새로 조회할 페이지
• prev: 이전에 조회한 적 있는데 다시 조회할 페이지