7월 4일 TIL - react ) 무한스크롤 구현하기 (Intersection Observer)

게시글 목록에 무한스크롤 구현하기!

 

Intersection Observer

- 화면 상에 내가 지정한 타깃이 보이고 있는지를 관찰할 수 있도록 기능을 제공하는 API 

- Intersection Observer API를 사용해 화면에 띄어준 콘텐츠 중에 맨 마지막 요소를 관측해 콜백함수를 실행하는 원리로 무한스크롤을 구현

 

1. 무한스크롤 적용될 위치 잡아주기

무한스크롤이 시작될 요소에 ref를 달아주고 이 ref를 통해서 교차시점을 확인한다. 

import { useRef } from 'react';
const divRef = useRef();

useRef를 사용해서 divRef를 선언해주고 

<div ref={divRef}></div>

내가 원하는 위치에 빈 div 태그 넣어주고 ref 속성 넣어주기

 

 

2. 무한스크롤 관찰자 생성하기

const [currentPage, setCurrentPage] = useState(1);

const defaultOption = {
    root: null,
    threshold: 0.5,
    rootMargin: '0px'
  };
  
const observer = new IntersectionObserver(
    entries => {
      if (entries[0].isIntersecting) {
        setTimeout(() => {
          setCurrentPage(prevPage => prevPage + 1);
        }, 500);
      }
    },
    {
      ...defaultOption
    }
  );

• root(viewport) : 타겟 요소와 교차 영역을 정의하기 위해 사용하는 상위 요소 프로퍼티다. 만약 값을 넣지 않거나 null일 경우에는 브라우저의 viewport(보여지고 있는 요소)가 root로 지정된다.
• rootMargin : root 요소에 적용되는 margin 값을 정의하기 위한 프로퍼티. 지정한 값만큼 교차 영역이 계산되며 루트의 범위가 축소하게 된다.
• thresholds : 콜백함수를 실행시키기 위한 루트 영역과 타겟 요소와의 교차 영역 비율을 지정하는 프로퍼티.
  0.0과 1.0 사이의 값으로 지정한다. 값이 0이라면 타겟 요소가 교차 영역에 진입했을 때를 의미하며, 0.5라면 타겟 요소의 절반이 교차 영역에 들어왔을 때, 1.0이라면 완전히 교차 영역에 진입했을 때 콜백 함수가 실행된다.

 

callback 함수 checkIntersect는 target을 주시하는 역할을 하며 setTimeout을 걸어 다음 스크롤까지 로딩 될 시간을 걸어준다.

두번째 파라미터로 defaultOptin라는 객체값을 넘김으로써, 교차공간에 대한 프로퍼티를 전달해주었다.

 

 

  const [currentPage, setCurrentPage] = useState(1);
  const limit = 10;
  const offset = (currentPage - 1) * limit;

  return (
      <Content>
          {posts
            .map(post => {
                return (
                  <BoastPostBox
                    key={post.id}
                    onClick={() => {
                      return navigate(`/detailPage/${post.id}`);
                    }}
                  >
                    <PostImgBox>
                      {post.img === null ? <PostImg src={noneImg} /> : <PostImg src={post.img} />}
                    </PostImgBox>
                    <PostInfoBox>
                      <PostTitleBox>
                        <PostWriter>{post.userName}</PostWriter>
                      </PostTitleBox>
                      <PostTitle>{post.title}</PostTitle>
                    </PostInfoBox>
                  </BoastPostBox>
                );
              }
            })
            .slice(0, offset + 10)}
          <div ref={divRef}></div>
      </Content>
 )

화면에 뿌릴 posts 배열을 slice 메서드를 통해 우선적으로 뿌리고 게시글 10개가 내려가면 무한스크롤 관찰자가 인식된다

 

 

 useEffect(() => {
    observer.observe(divRef.current);
  }, []);

 

useEffect를 사용해서 화면이 랜더링 되면 observer의 내장 메서드 중 타켓 요소를 관측하는 observe 메소드에 divRef.current 값을 인자로 넣어준다