react infinite scroll

https://github.com/ankeetmaini/react-infinite-scroll-component#readme

GitHub - ankeetmaini/react-infinite-scroll-component: An awesome Infinite Scroll component in react.

특별히 복잡한 것은 없다.

스크롤시 반복데이터가 추가되는 대상 Element를 감싸고 설정하면 끝. 세상 참 좋아졌다.

 <InfiniteScroll next={props.onRequestData} hasMore={true} dataLength={props.data.length} style={{overflow:"hidden"}}>
 <Row className={'p-2'}>
 {
 	props.data.map((v, i) => {
 		return (
 		<Col md={4} className={'p-2'} key={i}>
 			<div className={'room p-4'}>						
 				<p>{v.content}</p>
 			</div>
 		</Col>
 		)
 	})
 }
 </Row>
 </InfiniteScroll>

위 콤포넌트와 별개로 그냥 useEffect에 vanilla를 엮으면 되긴 하더라.

 const handleScroll = () => {
 	let scrollY = window.innerHeight + window.scrollY;
 	if (scrollY >= window.document.body.offsetHeight - 2) {
 		/**
 		* 여기쯤에서 뭔가 하고 싶다면.
 		*/
 		window.scrollTo(window.scrollX, scrollY);
 	}
 };
 
 useEffect(() => {
 	console.log('mount');
 	window.addEventListener('scroll', handleScroll);
 
 	return () => {
 		console.log('unmount');
 		window.removeEventListener('scroll', handleScroll);
 	}
 }, [handleScroll]);

이거 보고 광고 한번 안 누른 이는 삼대가 재수가 없을지어다!ㅋㅋ