React를 사용하여 게시물 구성 요소 목록을 렌더링하는 페이지가 있고, 각 게시물 구성 요소에 대해 해당 게시물과 관련된 댓글을 가져와 React Query 라이브러리를 사용하여 내부에 표시합니다. 문제는 사용자가 게시물 페이지를 로드할 때 React Query가 모든 게시물에 대한 모든 댓글을 한 번에 로드하므로 백엔드 속도가 느려진다는 것입니다.

페이지가 렌더링될 때 모든 내용을 한 번에 로드하는 대신 사용자가 특정 게시물로 스크롤할 때만 댓글을 로드하는 메커니즘을 구현하고 싶습니다. React와 React Query를 사용하여 이를 달성하는 방법은 무엇입니까?

다음은 댓글을 가져오고 표시하는 현재 샘플 코드입니다.

내 게시물 구성요소

'react'에서 React 가져오기; '반응 쿼리'에서 { useQuery }를 가져옵니다. const PostComponent = ({ 게시 }) => const { 데이터, isLoading, 오류 } = useQuery( ['댓글', 게시물.id], () => fetchComments(post.id) ); 반품 ( 
 {/* 게시물 구성요소 렌더링 */} {isLoading && 
댓글 로드 중...
} {오류 && 
댓글 가져오기 오류
} {데이터 && 
{post.title}
 )} 
 ); };

내 게시물 페이지 구성요소

'react'에서 React 가져오기; '반응 쿼리'에서 { useQuery }를 가져옵니다. const 게시물페이지 = () => const { data, isLoading, error } = useQuery('posts', fetchPosts); 반품 ( 
 {isLoading && 
게시물 로드 중...
} {오류 && 
게시물 가져오기 오류
} {데이터 && data.map((포스트) => (  ))} 
 ); };