[React] Infinity Scroll 구현

무한 스크롤링이라곤 하지만 정확하겐 바닥에 닿으면 데이터를 새로 불러오는 로직이다.

 

여러 라이브러리가 존재하지만 순수 리액트만으로 작성을 해보았다.

 

먼저 스크롤이 화면 전체인 컴포넌트에서의 스크롤 구현이다.

해당 기능은 현재 진행중인 프로젝트내에서 여러곳에서 써야하므로 훅으로 구현을 하였다.

 

const useScroll = (totalPage, limit) => {

	const [page, setPage] = useState(1)
	const ScrollPaging = useMemo(
		() => throttle(() => {
			let scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)
			let scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop)
			let clientHeight = document.documentElement.clientHeight
			if (scrollHeight - 35 <= Math.round(scrollTop + clientHeight) && Math.round(scrollTop + clientHeight) <= scrollHeight && page < totalPage) {
				setPage(page + limit)
			}
		}, 300),
		[page, totalPage]
	)

	useEffect(() => {
		window.addEventListener('scroll', ScrollPaging)
		return () => {
			window.removeEventListener('scroll', ScrollPaging)
		}
	}, [ScrollPaging])

	return [page]

}

export default useScroll

먼저 hook을 선언 할 때 사용한 매개변수 totalpage와 limit는 전체 데이터의 갯수와 한번 조회시 불러올 레코드 수이다.

 

page는 데이터를 불러올때 몇번째 데이터부터 불러올지를 위한 상태 값이다. ScrollPaging 라는 함수를 스크롤 이벤트에 등록 해주어, 바닥이 닿았을때 page를 변경 시켜주었다.

 

사용법은 간단하다.

 

	const [page] = useScroll(totalPage, 20)

	useEffect(() => {
		//바닥에 닿을때 로직처리
	}, [page])

 이와 같이 구성하면 바닥에 닿을때 다음으로 page가 변하므로 page가 변할 때 처리할 로직을 useEffect 안에 작성해주면 끝난다.

 

두번째는 컴포넌트가 부분적인 화면에서의 스크롤을 가지고 있을 때다

 

스크롤을 가진 view에 ref를 선언 해준다.

const scrollView = useRef()

return (
<div className={videoContext.videoState === 'live' ? 'wrap-list-video' : 'wrap-list-video previous-video'}
		     ref={scrollView} onScroll={listenScrollEvent}>
)

ref.current안에 scrollHeight와 scrollTop, clientHeight에 접근을 해주어 바닥감지를 해준다.

	const listenScrollEvent = () => {
		if (scrollView.current.scrollHeight === scrollView.current.scrollTop + scrollView.current.clientHeight) {
			setIsScrollBottom(true)
		} else {
			setIsScrollBottom(false)
		}
	}

바닥에 닿으면 true 떨어지면 false로 상태값을 변경해준다.

	useEffect(() => {
		if (props.isScrollBottom) {
			//바닥에 닿을 때 로직 처리
		}
	}, [props.isScrollBottom])

스크롤을 적용할 컴포넌트에게 true | false 값을 넘겨주어 useEffect로 감지하여 이벤트를 처리해준다