React에서 인피니티 스크롤에 따른 Store의 상태를 업데이트 해 주는 로직을 구현하였습니다.

1. 구현 부분

   /**
    * 무한 스크롤 
    */
   type ListInterSectProps = {
   	totalItem: number; // 제한 갯수
   };
   
   const ListInterSect = React.memo((props: ListInterSectProps) => {
   	const {totalItem} = props;
   
   	const interSectRef = useRef<HTMLDivElement>(null); // IntersectionObserver 감지 div 영역
   
   	const storeCondition = useAppSelector(state => state.ListStore.condition);
   	const dispatch = useAppDispatch();
   
   	/**
   	 * IntersectionObserver가 이벤트 발생하면 실행 시키는 Callback 함수
   	 */
   	const handleObserver = useCallback(
   		async entries => {
   			const target = entries[0];
   			if (target.isIntersecting) {
   				dispatch(setLimit()); // Store 업데이트
   			}
   		},
   		[setLimit],
   	);
   
   	/**
   	 * IntersectionObserver 감지 이벤트
   	 */
   	useEffect(() => {
   		const interSectionOptions = {
   			root: null, // 기본 null, 관찰대상의 부모요소를 지정
   			rootMargin: "550px", // 관찰하는 뷰포트의 마진 지정
   			threshold: 0.5, // 관찰요소와 얼만큼 겹쳤을 때 콜백을 수행하도록 지정하는 요소
   		};
   		const observer = new IntersectionObserver(handleObserver, interSectionOptions);
   		if (interSectRef.current) return observer.observe(interSectRef.current);
   		return () => observer.disconnect();
   	}, [handleObserver]);
   
   	return <>{totalItem > storeCondition.limits.at(-1) ? <div ref={interSectRef}></div> : <></>}</>;
   });
   

2. 호출 부분

   <>
   	<List />
   	<HotelListInterSect totalItem={totalItem} />
   </>