React Next | 인피니티 스크롤 (Infinite Scroll)

[post.jsx]

 

import wrapper from '../Providers/createCtx'
import { GET_POST } from '../reducers/post'
import { END } from 'redux-saga'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import Link from 'next/link'

const posts = () =>{
    const dispatch = useDispatch()
    const {posts} = useSelector(state => state.post)
 
    const postLink = posts.map((v,k)=>{
        return(
            <li key = {k}>
                 {/* <h2><Link href="/posts/[id]" as={`/posts/${v.id}`}><a>{v.title}</a></Link></h2> */}
                 <h2><Link href={`/posts/${v.id}`}><a>{v.title}</a></Link></h2>
                <span>{v.body}</span>
            </li>
        )
    })
    useEffect(()=>{
        function scrollFn(){
            if ((parseInt(window.scrollY + document.documentElement.clientHeight)) === document.documentElement.scrollHeight){
                console.log('hello!');
                dispatch(GET_POST())
            }
        }
        window.addEventListener('scroll',scrollFn)           // 스크롤 내릴때마다 저 함수이벤트 발생하게
        return () =>{
            window.removeEventListener('scroll',scrollFn)   // 종료시점도 지정해주기
        }
    },[])

    return (
        <>
            <h1>Posts ({posts.length})</h1>
            <ul>
                {postLink}
            </ul>
        </>
    )
}



export default posts

 

 

import { useEffect } from 'react'

 

1. window.scrollY

: 현 시점 스크롤의 높이

 

2. document.documentElement.clientHeight

: 내 브라우저(눈에 보이는)의 높이

 

3. document.documentElement.scrollHeight

: 토탈 높이

1+2 = 3 이 됨

 

scrollHeight = scrollY + clientHeight  같아지면 scroll이 끝까지 내려갔다는 것이다.

 

useEffect 안에 스크롤 끝까지 도착했을 때 dispatch를 보내서 또 data를 받아오는것. - 그래서 무한으로 된당

 

 

근데 내 브라우저가 이상한지 값을 더하면 살짝 넘치거나 모자라는 경우가 있어서 parseInt 로 해줬다. 

처음 몇번은 잘 되다가 한 5번 넘어가면 값이 모자라면서 같아지지 않아서 거기서 멈추게 된다 ㅜㅜ 아무튼 요거는 라이브러리 있다고 하니까 다시 한번 봐야할 듯 싶다