TanStack Query와 함께 구현한 cursor 방식의 무한 스크롤

이번 프로젝트에서는 모바일 사용자를 타겟으로 진행했기에 모바일에서 더 사용성이 좋은 무한 스크롤을 구현하게 되었습니다. 이전에는 offset 방식만을 사용해서 구현해보았는데 이번에는 cursor 방식을 선택해서 작업했습니다.

낯선 cursor 방식을 선택한 이유는 offset 방식으로 구현하면 건너뛸 페이지를 지정해서 데이터를 요청하고 응답받기 때문에 해당 페이지에서 실시간으로 데이터 리스트들의 변경사항이 있어도 스크롤시 변경되지 않기 때문에 데이터의 일관성을 보장할 수 없다고 생각했기 때문입니다.

백엔드에서 데이터를 보낼 때 더 불러올 데이터가 있을 때까지 nextCursor 값을 보내주기로 논의했고, API에서는 type, cursor, limit, order 값이 쿼리로 주어졌고 그 중 type만 필수 값으로, 나머지는 옵셔널이었습니다.

 

export interface useGetMessageListProps {
	userId: string
	type: MessageType
	cursor?: Date | null
	limit?: number
	order?: string
}

 

 

이 조건에 맞추어 react-query의 useQuery를 사용해 데이터를 불러오고, 처음 요청해서 받은 데이터에 nextCursor값이 있을 때까지 useInView를 가지고 다음 데이터들을 불러오도록 했습니다.

 

먼저 useQuery를 사용해서 api를 호출할 때, 필수값으로 보내야하는 userId와 type는 baseUrl로 두고 나머지 cursor, limit, order는 params라는 변수명으로 합쳐서, 최종 url을 조합했습니다.

 

토큰이 있는데도 프론트에서 userId를 보내는 이유는 기존 1차 개발물이 있는 상태에서 추가 개발을 하는 환경이었기 때문에 백엔드와 API 표현방식에 대한 논의를 할때 RESTful함을 유지하기 위하여 현재 방식으로 합의했습니다.

 

export const useGetMessageList = ({
  userId,
  type,
  cursor,
  limit,
  order,
}: useGetMessageListProps) => {
  return useQuery<MessageResponse, Error>({
    queryKey: ['getMessageList', userId, type, cursor, limit, order],
    queryFn: async () => {
      const baseUrl = `/v2/users/${userId}/messages?type=${type}`
      const params = new URLSearchParams({
      ...(cursor && { cursor: cursor.toString() }),
      ...(limit && { limit: limit.toString() }),
      ...(order && { order }),
      })

      const url = params.toString()
        ? `${baseUrl}&${params.toString()}`
        : baseUrl

      try {
        const { data } = await baseQuery.get(url, {
          headers: {
            Authorization: `Bearer ${localStorage.getItem('keep_in_touch_token')}`,
          },
        })
        if (!data) {
          throw new Error('No data received')
        }
        return data
      } catch (error) {
        console.error('Error fetching messages:', error)
        throw Error
      }
    },
  })
}

 

 

리스트 API를 호출할 컴포넌트에서 상태관리할 값은 useState로 관리했습니다.

상태관리할 값으로는 페이징 관리를 위한 cursor, API로부터 받은 data를 저장하는 역할을 하는 messages를 작성했고 다음과 같이 useGetMessageList 훅을 호출해서 data fetching 로직을 작성했습니다.

 

export default function MessagesBlock({
  type,
  userId,
}: {
  type: MessageType
  userId: string
}) {
  const [cursor, setCursor] = useState<Date | null>(null)
  const [messages, setMessages] = useState<MessageResponse>()
  const [hasMore, setHasMore] = useState(true)

  const { data, isLoading } = useGetMessageList({
    userId,
    type,
    cursor,
    limit: 10,
    order: 'desc',
  })

...

 

 

useGetMessageList 훅을 호출해 받은 data 타입은 다음과 같습니다.

export interface MessageResponse {
	receiveMessageCount?: number
	sentMessageCount?: number
	unreadMessageCount?: number
	nextCursor: Date | null
	messageList: Message[]
}

 

사용자에게 보여줄 쪽지 리스트 배열은 messageList 내에 배열로 있고, 받아온 nextCursor 값을 cursor값으로 호출해야했기에 setCursor로 cursor값을 관리했습니다.

 

먼저 만족해야하는요건들을 작성했습니다.

• 초기 데이터 호출시 받은 nextCursor 가 null 이 아니면 다음 데이터 호출시 그 값을 cursor에 담아 보낸다
• 받은 데이터는 가지고 있다가 호출시마다 변경된 상태 업데이트
• 뷰포트를 모니터링하다가 마지막 아이템이 뷰에 들어왔을 때 다음 데이터를 호출할 수 있도록 한다. 

위 요구사항을 정리해서, cursor가 존재한다면 현재 메시지 리스트 데이터와 새로운 메세지 목록 데이터를 결합하는 updateMessages 함수를 작성했습니다.

 

 useEffect(() => {
    if (data?.messageList) {
      const newMessageList = data.messageList
      setMessages((prev) => {
        const updatedMessageList = cursor
          ? [
              ...(prev?.messageList || []),
              ...newMessageList.filter(
                (newMsg) =>
                  !(prev?.messageList || []).some(
                    (prevMsg) => prevMsg.messageId === newMsg.messageId
                  )
              ),
            ]
          : newMessageList

        return {
          receivedMessageCount:
            data.receivedMessageCount || prev?.receivedMessageCount,
          sentMessageCount: data.sentMessageCount || prev?.sentMessageCount,
          unreadMessageCount:
            data.unreadMessageCount || prev?.unreadMessageCount,
          nextCursor: data.nextCursor ?? prev?.nextCursor ?? null,
          messageList: updatedMessageList,
        }
      })

      setHasMore(!!data.nextCursor)
    }
  }, [data, cursor])

 

반환값은 정리하면 다음과 같습니다.

• useEffect는 data?.messageList가 존재하는 경우에만 실행됩니다.
• 수신된, 발신된, 읽지 않은 메시지의 개수 업데이트를 하는데 만약 data가 undefined일 경우 이전 값을 유지합니다.
• newMessageList를 data.messageList로 정의하고, 상태 업데이트 로직을 통해 새로운 데이터를 messages에 추가합니다.

cursor 방식은 새로 호출할 값만큼만 가져오기 때문에 필터링이 필요한지 고민이 들었는데, 만약 실시간으로 변경되는 데이터가 있다면 필터링이 필요하지 않은가? 라고 생각해서 쪽지의 messageId 값을 기준으로 필터링해서 중복을 제거했습니다.

이렇게 해서 updatedMessageList에는 중복되지 않은 메시지만 포함됩니다.

 

 

 

 기존 1차 개발물에 존재하던 react-cool-inview 라이브러리의 useInView를 사용하여 컴포넌트가 뷰에 들어왔을 때 호출되는 onEnter 콜백을 설정했습니다. 로딩 상태가 아닌 경우와 data.nextCursor가 존재할 경우를 모두 만족할 때 해당 커서를 설정해서 다음 메시지 페이지를 가져올 수 있도록 했습니다.

 다음과 같이 observe를 데이터 리스트를 불러올 컴포넌트에 props로 등록해서 해당 컴포넌트의 마지막 뷰포트에 진입되었을 때 setCursor에 data의 nextCursor값을 할당하도록 했습니다.

 

  const { observe } = useInView({
    onEnter: () => {
      if (hasMore && !isLoading && data?.nextCursor) {
        setCursor(data.nextCursor)
      } 
    },
  })
  
  return (
    <div>
      {messageCount > 0 ? (
         <MessageList
           messages={messages}
           userId={userId}
           messageType={messageType}
           observe={observe}
          />
            ) : (
              <div>
                ...
              </div>
            )}
          </div>
  )
}

 

https://youtu.be/gUQKzlbdzQg