{
// 검색어가 없거나 검색을 처음 시작할 때는 검색 X
if (!keyword.trim()) {
return;
}
const observer = new IntersectionObserver(onIntersection, { threshold: 1 });
if (loadMoreRef.current) {
observer.observe(loadMoreRef.current);
}
return () => {
if (loadMoreRef.current) {
observer.unobserve(loadMoreRef.current);
}
};
}, [onIntersection, keyword]);">
{
// 검색어가 없거나 검색을 처음 시작할 때는 검색 X
if (!keyword.trim()) {
return;
}
const observer = new IntersectionObserver(onIntersection, { threshold: 1 });
if (loadMoreRef.current) {
observer.observe(loadMoreRef.current);
}
return () => {
if (loadMoreRef.current) {
observer.unobserve(loadMoreRef.current);
}
};
}, [onIntersection, keyword]);">
{
// 검색어가 없거나 검색을 처음 시작할 때는 검색 X
if (!keyword.trim()) {
return;
}
const observer = new IntersectionObserver(onIntersection, { threshold: 1 });
if (loadMoreRef.current) {
observer.observe(loadMoreRef.current);
}
return () => {
if (loadMoreRef.current) {
observer.unobserve(loadMoreRef.current);
}
};
}, [onIntersection, keyword]);">
const onIntersection = useCallback(
(entries) => {
console.log("onIntersection function");
const firstEntity = entries[0];
if (firstEntity.isIntersecting && hasMore) {
fetchSearchPlaces(searchType, keyword, page);
}
},
[hasMore, searchType, keyword, page]
);
useEffect(() => {
// 검색어가 없거나 검색을 처음 시작할 때는 검색 X
if (!keyword.trim()) {
return;
}
const observer = new IntersectionObserver(onIntersection, { threshold: 1 });
if (loadMoreRef.current) {
observer.observe(loadMoreRef.current);
}
return () => {
if (loadMoreRef.current) {
observer.unobserve(loadMoreRef.current);
}
};
}, [onIntersection, keyword]);
Intersection Observer란?
Intersection Observer는 DOM 요소가 뷰포트(Viewport, 화면)와 교차하는 시점을 감지할수 있는 API 이다.
이 API를 사용하면 스크롤 이벤트를 직접 처리하지 않고 효율적으로 특정요소가 화면에 들어오거나 나가는 시점을 알 수 있다.
const observer = new IntersectionObserver(callback, options);
IntersectionObserver 객체를 생성한다. 이때 파라미터에는 콜백함수와 IntersectionObserver에대한 옵션(설정) 이 들어간다.
useEffect(() => {
// 검색어가 없거나 검색을 처음 시작할 때는 검색 X
if (!keyword.trim()) {
return;
}
const observer = new IntersectionObserver(onIntersection, { threshold: 1 });
if (loadMoreRef.current) {
observer.observe(loadMoreRef.current);
}
return () => {
if (loadMoreRef.current) {
observer.unobserve(loadMoreRef.current);
//observer.disconnect();
}
};
}, [onIntersection, keyword]);
observer.observe(loadMoreRef.current);
observer.observe(loadMoreRef.current) 가 실행되면 observe내에 파라미터 loadMoreRef.current요소가 관찰되기 시작한다.
만약 관찰중인 요소가 화면에 보이거나 사라질때 onIntersection 콜백함수가 실행되며
이때 entries가 파라미터로 전달되며, 관찰중인 요소들의 상태를 모두 포함한다.
즉, 교차중인 상태 뿐아니라 교차하지 않는 상태도 포함한다.
observer.unobserve(loadMoreRef.current);
useEffect의 CleanUp 함수로 다음 useEffect가 실행될때 기존의 관찰요소를 제거한다.
기존의 관찰요소를 제거해야 다음관찰요소를 entries[0] 번째 배열에서 꺼낼수있으며 기존의 관찰요소를 제거하지 않을경우 스크롤과 화면이 교차하는 위치가 꼬일수있다.
observer.disconnet()로 관찰대상을 모두 제거하거나, 특정요소를 제거하는 unobserve를 사용해도 된다. 위의 코드의경우 관찰요소는 하나만 항상 담기 때문에 unobserve를 선택하였다. 관찰요소를 모두 해제함으로써 useEffect 내에서 계속해서 생성되는 누적되는 객체는 가비지 컬렉터에 의해서 제거된다.