React + Express 무한 스크롤 기능

프로젝트를 하면서 무한 스크롤 기능을 구현해보았다. 프론트에서도 처음 구현하는 기능이었지만 백엔드도 처음이라 여러 시행착오를 겪었다. 그래서 그 과정을 간략히 기록하고자 한다. 

---

#. 무한 스크롤 기능

많은 데이터를 한번에 불러오게 되면 그만큼 사용자에게 로딩되어 보여지는 속도가 늦어지게 된다. 따라서 처음 로딩되었을 때 사용자에게 일정 데이터만 먼저 제공하고 이후 사용자가 더 많은 데이터를 보려고 스크롤을 움직이는 액션을 취하면, 그때 추가로 또 일정 데이터를 제공해주는 것을 반복하는 것이 무한 스크롤 기능이다.

 

 

#. 백엔드 구현

목표: 클라이언트에서 데이터 요청 시 알맞는 데이터를 넘겨주는 것!

백엔드를 구현하는데 가장 시행착오를 겪었다. 백엔드에서 어떻게 데이터를 보내주는냐에 따라 프론트엔드에서 데이터를 요청하는 방식도 달라지기 때문에 덩달아 여러번 수정이 이루어졌다.

처음엔 백엔드를 커서 기반 페이지네이션으로 동작하게끔 코드를 짰다. 프론트엔드에서 데이터를 보여주는 방식이 다를 뿐 서버에선 무한 스크롤이든 페이지네이션이든 똑같이 추가되는 데이터를 찾아 전달해주면 된다고 생각했기 때문이다. 그래서 프론트엔드에서 첫 랜더링 되어지는 데이터의 마지막 번호를 기준으로 cursorId를 전달하여 다음 데이터를 요청하였다.

그런데 친구의 피드백으로 이런 방식보단 서버에서 데이터 응답 시 다음 페이지를 요청할 수 있는 api 주소를 같이 전달하는게 더 좋을거 같다는 말을 들었다. 그리고 이 말을 듣고 보니 새삼 YouTube API도 이러한 구조임을 떠올렸다.

YouTube API도 한번에 최대 50개씩 데이터를 전달 받을 수 있고 그 다음 데이터를 받으려면 응답 시 받은 nextPageToken을 함께 보내야 한다. 그래서 유튜브도 무한 스크롤 기능이 사용되기 때문에 친구의 피드백이 더 적절한 방법이구나 싶어 전면 수정하게 되었다. 수정된 코드는 다음과 같다. 

 

// controller code

export const latestVideosByPage = async (req, res) => {
  const { pageNum } = req.query;
  const data = await getLatestVideosByPage(pageNum);
  let nextPage =
    data.length === 0 ? "" : `videos/latest?pageNum=${parseInt(pageNum) + 1}`;

  return res.json({ data, nextPage });
};


// model code

export const getLatestVideosByPage = async (pageNum) => {
  const SELECT_VIDEO = `select etag, id, snippet from latestVideos where idx > ${
    (pageNum - 1) * 15
  } limit 15;`;
  const [row, field] = await connection.promise().query(SELECT_VIDEO);
  return row;
};

위 코드를 간략히 설명하자면, 초기 데이터 응답 시 nextPage 값으로 'http://localhost:5000/videos/latest?pageNum=2'를 전달한다. 그럼 프론트엔드에서 다음 데이터 요청 시 해당 url로 서버에 요청하고, 서버에선 query로 pageNum 값을 기준으로 다음 페이지에 맞는 데이터를 DB에서 찾아온다. 그리고 그 데이터를 다시 전달할 때 또 다음 페이지 요청 url인 'http://localhost:5000/videos/latest?pageNum=3'을 함께 전달하는 구조이다. 끝! (** 참고로 나는 프론트엔드 개발자를 준비중이라 백엔드 개발 수준이 미흡할 수 있다 🙏)

 

#. 프론트엔드 구현

목표: 사용자가 화면을 스크롤해서 특정 위치가 닿으면 서버에게 다음 데이터를 추가로 요청하여 사용자에게 데이터를 보여주는 것!

무한 스크롤 기능에 대해 구글링 해보니 크게 두가지 방법이 있었다. 첫번째 방법은 window에 스크롤 이벤트를 통해 화면 스크롤이 맨하단에 닿았을 때를 감지하는 것. 두번째 방법은 react-intersection-observer를 이용해 맨하단의 특정 태그가 보여질 때를 감지하는 것.

 

처음엔 두번째 방법인 react-intersection-observer을 이용해 구현했다. react-intersection-observer를 설치하고 페이지 맨 하단에 <span> 태그를 만들어 거기에 ref 속성을 지정해두었다. 그럼 화면을 스크롤해서 해당 태그가 보여질 때마다 inview 값이 false에서 true로 변경된다. 그리고 그 값이 true가 될 때 서버에 다음 데이터를 요청하는 api를 호출했다. (*ref, inview는 react-intersection-observer에서 제공하는 것)

그런데 이왕이면 다른 패키지 사용 없이 직접 구현해보는 것도 좋을거 같아 다시 첫번째 방법으로 수정하였다. 그래서 useEffect를 이용해 window의 스크롤 이벤트를 감지하였고, 스크롤이 원하는 위치가 되었을 때 isHitBottom이란 값을 false에서 true로 변경되도록 했다.

그리고 이때 이벤트를 실행한 다음 이벤트를 바로 제거하는 것이 중요하다. 만약 제거하지 않으먄 컴포넌트가 리랜더링될 때마다 window에 이벤트 핸들러를 계속 추가하게 되어 의동치 않은 동작이 발생하거나 메모리적으로 문제가 생기기도 한다(그렇다고 한다🙂)

따라서 isHitBottom 값이 true가 될 때 서버에 데이터를 요청하는 api를 호출하면된다. nextPageNum은 서버에서 이전 데이터 응답 시 보내준 다음 페이지의 api url에 대한 값이다. (*비동기 호출은 redux-saga를 이용함)

 

// component code

const [isHitBottom, setIsHitBottom] = useState(false);

useEffect(() => {
  const handleScroll = () => {
	const { scroolTop, offsetHeight } = document.documentElement;
	if(window.innerHeight + scrollTop >= offsetHeight) {
      setIsHitBottom(true);
    }
  };

  setIsHitBottom(false);
  window.addEventListener('scroll', hadleScroll);
  return () => window.removeEventListener('scroll', handleScroll);

})

useEffect(() => {
  if (isHitBottom && nextPageNum.length !== 0) {
    dispatch(latestVideosRequest(nextPageNum));
  }
}, [isHitBottom]);



// api code

const LATEST_VIDEOS = "/videos/latest";

export const latestVideosByPage = async (pageNum) => {
  try {
    const res = await axios.get(`${LATEST_VIDEOS}?pageNum=${pageNum}`);
    if (res) return res.data;
  } catch (err) {
    console.log(err);
  }
};