간단한 개인 프로젝트를 진행할때는 라이브러리 사용 없이 무한 스크롤을 구현하지만, 수천개의 카드 컴포넌트를 무한 스크롤로 만들어야되는 프로덕트의 경우 라이브러리 사용이 권장된다.

라이브러리를 사용하여야 하는 이유

가독성이 높기에 유지보수를 위해 권장된다.
또한, 일일이 scroll 높이에 맞춰서 fetch시점을 정한다던가, fetch를 기다리는 동안 화면에 어떤 식으로 구현할지를 복잡하게 작성하지 않아도 되기에 권장된다.

egjs-infinitegrid를 사용한 이유

demo가 잘 갖추어져있는 오픈소스를 좋아하는데, react-window나 react-virtual보다 문서 및 데모가 잘 정리되어있어서 사용하게 되었다.
리액트에서는 공식적으로 위의 두가지 오픈소스를 사용하도록 권장하고 있기는 해서,,앞의 두개를 사용하는 것도 나쁘지는 않은 초이스가 될 것 같다(아무래도 레퍼런스도 많고).

Codes

<MasonryInfiniteGrid
  className='products'
  align='justify'
  gap={25}
  threshold={1000}
  onRequestAppend={(e) => {
    e.wait() 
    setLoading(true)
    getItems(e)
  }}
  onRenderComplete={(e) => {
    setLoading(false)
  }}
 >
  {productList.map((item, idx) => {
    return <ListCard item={item} user={user} key={idx} gridKey={page} />
  })}
</MasonryInfiniteGrid>

해설

가장 기본적인 Masonry 형태의 무한 스크롤을 구현하는 컴포넌트이다.
threshold를 사용하면, endpoint를 vh끝지점에서 지정한만큼 올려서 onRequestAppend를 실행하게된다.
이를 통해 페이지가 끝 단에 도착하기 전에 미리 렌더를 함으로써, 사용자가 rendering을 기다리지 않도록 할 수 있다!

onRequestAppend는 끝 지점에 도달하자마자 스크롤 움직임 마다 이벤트를 발생시킨다.
이벤트가 여러번 읽히기 때문에 한번만 읽히게 하기 위해서 e.wait()를 사용하였다.
이는 e.preventDefault 같은 것으로 보면 된다.
e.wait()을 사용한 후, fetch전 미리 바꿔줘야하는 state를 업데이트 한 후, getItems()를 통해 fetch를 실행한다.
getItems()안에 e.ready()를 기재하여, 이벤트가 읽힐 준비가 되었음을 명시한다.

참고자료

• naver/egjs-infinitegrid