Infinity scroll

최근 웹사이트에서 자주 볼 수 있는 무한 스크롤을 구현하였다.

흔한 기능이라 쉽게 생각 할 수 있지만, 누군가 이야기 했던가, 인간에게 어려운 일은 컴퓨터에게 쉽고, 인간에게 쉬운 일은 어려운 법이라고.

내용 자체가 어렵다기 보다는 처음에 감을 잡는데 시간이 오래 걸렸다는 느낌이 든다.

어쨋든 이번에 구현한 무한스크롤에 대해 알아보도록 하자.

무한스크롤이란?

코드를 보기전에 우선 무한스크롤이 어떤것인지에 대해 알아야 한다.
무한스크롤이란 스크롤이 최하단에 도달했을때, 새로운 데이터를 받아와서 아래에 붙이는 데이터의
로드 방식이라 생각하면 된다.

핵심은 스크롤이 최하단에 도달했는지 아닌지를 어떻게 코드로 인식을 시킬것인가에 있다.

무한스크롤 flow

무한스크롤이 어떻게 작동 되는지 쪼개보자면,

1. 스크롤이 최하단에 도달한다.
2. 스크롤이 최하단에 도달한것을 감지한다.
3. 스크롤이 도달하였다면 데이터 요청을 보낸다.
4. 불러온 데이터를 기존의 데이터에 합친다.
5. 다시 스크롤을 감시한다.

로 볼 수 있다.

2번이 핵심인데, 스크롤의 위치를 감지하기 위해서는 어떤 방법이 있을까?

어떤 방법을 이용할까?

방법은 두가지다.

1. Viewport와 스크롤 이벤트를 이용해서 계산하는 방법
2. Intersection Observer API를 사용해서 감지기(Observer)를 두는 방법

이번에는 두번째 방법인 Intersection Observer를 이용한 방법에 대해 다뤄보려 한다.

Intersection Observer

Intersection Observer는 쉽게 말하면, 어떤 요소를 매개로 화면상의 어떠한 변화를 감지하여, 감지 되었을때 콜백을 실행하는 API이다.

화면을 내리다가 어떠한 요소(target)과 교차할때 콜백을 사용하는 것이다.
이때 options를 통해서 해당 요소와 얼마나 교차 되었을때 실행 할것인지(threshold), target과 어느정도 거리가 가까워졌을때 콜백을 실행할 것인지(rootMargin)를 정할 수 있다.

이때 사용 된 코드를 가져와 보면,

  useEffect(() => {
    if (target.current) {
      const observer = new IntersectionObserver(onIntersect, option);
      observer.observe(target.current);
      return () => observer && observer.disconnect();
    }
  }, [onIntersect, target]);

target은 useRef를 이용해 문서 최하단에 빈요소 div에 두었고, 이 요소가 화면안에 들어왔을 경우 onIntersect를 실행한다.
이때, 이 observer는 useRef가 적용된 div를 보고 있고, 한번 감지가 완료 되었을때 observer의 감시를 종료한다.

onIntersect

  const onIntersect = useCallback(([entry]) => {
    if (entry.isIntersecting) {
      setPage((page) => page + 1);
    }
  }, []);

onIntersect는 배열 요소로서 여러가지의 IntersectionObserverEntry라는 객체의 배열을 반환하는데, 이중 isIntersecting은 해당 요소의 교차상태를 Boolean값으로 나타낸다.

그리고 isIntersecting이 true가 되면 page를 증가시키고, page를 읽고 있던 useEffect가 새 쿼리로 요청을 보내는 flow가 완성된다.

그렇게 불러온 새 데이터는 기존의 Data 배열에 concat을 이용하여 합치게 된다.

회고

무한스크롤을 구현해 본것은 이번이 처음이 아니었다.
혼자 강의를 들을때 리액트 챌린지로 나온것이 무한스크롤이었고, 밤늦게 시작했던 챌린지는 새벽이 되어 해가 뜰때쯤 완료했던 기억이 난다.

이야기만 들었었던 무한스크롤은 처음엔 이해하기가 굉장히 어려웠지만, 그만큼 만들면서 재미가 있었다.
만들고 나서 내가 해냈다는 생각에 다음날 하루종일 기분이 좋았고, 이래서 뭔가를 구현하는것은 즐겁다라는것을 느꼈다. 밤을 새면서 졸음을 느끼지 않다가 구현이 완료 되고 제출 한 다음에야 잠이 쏟아진걸 봐서 상당히 집중도 했을테고 말이다.

이번에 구현할때는 페어프로그래밍으로 진행 되었기에, 다른 사람은 어떤 방식으로 구현하는지를 배울 수 있는 귀중한 기회가 되었던것 같다.

물론 동시에, 그때 사용했던 코드와 개념을 다시 한번 이해하는 시간이 되었다.

참고링크

• MDN
• https://heropy.blog/2019/10/27/intersection-observer/
• http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/