Intersection Observer API로 무한 스크롤 쉽게 만들기 - 플리맨 프로젝트

해당 포스팅은 플리맨(FleaMan) 프로젝트의 광고 겸 개발일지입니다.
시간되실때 플리맨(https://fleaman.shop) 서비스 한번 사용해주시고 피드백주시면 감사하겠습니다.

요즘 사이트(?) 같네

플리맨 초기 버전을 보신분들은 아시겠지만 플리맨에서는 초기 로딩된 컨텐츠 이외에 더 보고싶으면 More... 버튼은 눌러야했다. 그런데 이런 방식은 요즘 사이트(?)에서 많이 안쓰더라. velog만 보더라도 버튼 없이 스크롤을 쭉쭉내리면 새로운 컨텐츠가 나온다. 물론 무한 스크롤을 적용한 것이 요즘 사이트 같아 보이고 싶어서만은 아니다. 버튼을 굳이 안눌러도 되니 분명 사용성도 올라갔을 것이다. 굳이 이유를 비율로 따져보면 8:2 되려나.. (나는 UI 디자이너는 아니다보니 죄책감은 없다)

뭘로 만들까

react-intersection-observer

프론트엔드가 리액트로 구현되어 있다보니 구글링을 "리액트 무한 스크롤"로 했다. 가장 많이 나오고 쉬워보이는 것으로 했다. "react-intersection-observer"가 좋아보이더라. 실제로 쉬웠고 그래서 제목에 "쉽게"도 붙였다.

어떻게 만들까

react-intersection-observer

우선 설치해야한다. npm을 사용하면 아래 명령어로 설치가 가능하다.

npm install react-intersection-observer

useInView

단순히 생각했을때 사용자가 스크롤 끝에 다달았을 때 추가로 데이터를 불러오면 될것같다. 그래서 플리맨도 그렇게 해줬다. 그런데 끝에 다달았다는 것을 정의하는 것을 어떻게 해야할지 막막할 것이다. 그때 useInView를 쓰면 아주 쉽게 해결되는데 사용법은 아래와 같다.
useInView를 사용하면 ref와 inView를 정의할 수 있다. ref는 끝이라는 기준으로 참조할 태그에 달아주면 된다. 아래 코드에서는 div에 달려있는데 저 div가 보이면 끝에 다달았다고 판단하게 된다. 그때 inView의 값이 변하고 useEffect로 캐치해서 데이터를 추가해주면 되는것이다.

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

function Component() {
  const [ref, inView] = useInView();
  const [data, setData] = useState([]);
  useEffect(()=>{
    "데이터 불러와서 추가하는 코드"  
    }, [inView]);
  
    return(
     <>
      "데이터 보여주는 코드"
      <div ref={ref}/>
     </>
    )
  }

마무리

오늘 포스팅은 아주 짧다. 그래도 무한 스크롤 개발 방법 중 react-intersection-observer에 대한 설명은 충분하다고 생각한다. 혹시 이 포스팅을 보고도 이해가 안되거나 더 쉬운 방법이 있다면 댓글로 언제든 남겨줘라. 언제든 댓글은 환영이다.
다음 포스팅은 페이지를 최상단으로 올려주는 버튼에 대해 다뤄보려고 한다. (무한 스크롤로 페이지를 내렸으니 올라갈수도 있어야지)
요즘 통계를 보면 "플리맨 프로젝트" 포스팅의 방문자가 많아서 기분이 좋다. 더 많은 분들이 보고 도움받았으면 좋겠다. 그리고 플리맨도 많이 이용해줬으면 좋겠다. 간혹 블로그 이용자가 플리맨보다 많을때가 있다.. 😂