-
Notifications
You must be signed in to change notification settings - Fork 0
useInfiniteScrollQuery 사용법
JuhyunLim edited this page Apr 19, 2023
·
1 revision
- 두 군데에서 사용되는 기능
- 컴포넌트에서 진행할 시 컴포넌트 역할이 로직까지 너무 크게 확대된다고 생각해서.
- infiniteScroll을 이용해야 할 때
- 추가로 intersection observer을 이용해야 할 때.(useIntersectionObserver 이용)
고민한 부분
- 구조 인지를 빠르게 하기 위해 Query를 불러오는(infiniteQuery더라도) 함수는
api/파일명
과 대칭이 되는hooks/queries/파일명
내에서 호출하고 싶었음. - infiniteScrollQuery를 사용하는 기능과 intersectionObserver을 사용하는 기능을 재사용이 가능하게 완전히 분리하고 싶었음
- infiniteScrollQuery를 통해 완성된 데이터를 가공하는 작업을 컴포넌트가 아닌 함수로 분리해 컴포넌트의 역할을 최소화하고 싶었음
- 컴포넌트에서 수행하는 일
- hooks/queries/파일명/함수를 호출해서 다음 데이터를 받아오는 함수(fetchNextPage)를 가져옴.
-
intersectionObserver
에 관찰 대상과 1번 함수를 주입. - 만들어지는 데이터를
linkageInfiniteScrollData
에 넣어서 하나의 배열로 만들어 가져옴
- 원하는 파일에서
const observeTarget = useRef<HTMLDivElement>(null); // target설정
const infiniteQuery = useGetInfiniteFeed(); // infiniteQuery return값 가져옴
useIntersectionObserver({
containerTarget: observeTarget, // target
onIntersect: infiniteQuery.fetchNextPage, // fetchNextPage함수
});
const reviewData = linkageInfiniteScrollData<ReviewResponseType>( // <ReviewResponseType> : 해당 파일에서 원하는 타입 주입해 사용
infiniteQuery?.data // 결과로 나온 data 형식을 바로 쓸 수 있게 하나의 배열로 변환
);
return (
<S.Section ref={observeTarget}>
{reviewData?.map((data: ReviewResponseType, i) => (
<Review key={i} data={data} />
))}
</S.Section>
);