[TIL] 무한스크롤 리팩토링

무한스크롤 기능 구현 & 리팩토링!!! 밀린 til 쓰기...

처음에는 스크롤 길이를 계속 감지해서 스크롤이 끝에 닿으면 get 요청을 보냈다

const handleScroll = () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;

    if (scrollTop + clientHeight >= scrollHeight) {
      setOffset((prev) => prev + 1);
    }
  };

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

1. get 요청에 제한을 걸어두지 않아서 받아올 데이터가 없을 때도 계속 보냈다.
2. 가로스크롤에서도 get 요청이 발생하는 현상 발견 ★

react-intersection-observer 사용하기

useInView 사용해서 마지막 요소를 관찰하기

import { useInView } from "react-intersection-observer";

(...)

// lastRef가 80% 보일 때마다 useEffect로 데이터 호출해서 붙여주기
  const [lastRef, lastCard] = useInView({			
      threshold: 0.8,
      triggerOnce: true,
  });

  useEffect(()=>{
    const getPosts = async () => {
      const data = await axios.get(`/post?offset=${offset}`)
      setPosts(data.data.posts)
      setOffset(offset+1)
    }
    getPosts()
  },[])

  useEffect(()=>{
    const getPostsScroll = async () => {
      if(posts.length!==0) {
        const data = await axios.get(`/post?offset=${offset}`)
        setPosts([...posts, data.data.posts])
        setOffset(offset+1)
      }
    }
    getPostsScroll()
  },[lastCard])
  
 (...)
 
// 전체리스트 길이와 비교하며 마지막일 때 lastRef
  posts.map((post, i)=> {
          return (
          <StPostCard key={i} ref={i = posts.length-1?lastRef:null} 
            onClick={()=>{navigate(`/detail/${post.postId}`)}}
          >
          
  (...)
  

내가 어질러놓은 코드를 팀원분이 정리해줬다..ㅎㅎㅎ
담에는 첨부터 더 깔끔하게 짜보고, 페이지네이션도 도전해야징