월요일

오랜만에 쓰는 일기장.... 무한스크롤을 구현했다.

IntersectionObserverAPI로 무한스크롤 구현useEffect내에서 state의 dependency 문제

스크롤바에 이벤트를 걸어 무한스크롤을 구현

처음 만들었을 때 사용한 방법

처음만들었던거 치고는 굉장히 쉽고 빠르게 만들었다. 하지만 인터넷의 많은 글을 보니 스크롤에 이벤트를 거는 방법을 추천하지 않는거같았다. 성능에 많은 영향을 끼친다고 한다.

이런 이슈에 대한 해결책으로 IntersectionObserver API 를 많이 사용한다. 따라서 IntersectionObserver API 를 이용하는 방법으로 변경했다.

IntersectionObserver API

인터넷에 있는 글들을 보면 다 너무 어렵게 설명하는데 구글 크롬 디벨로퍼 의 영상을 보면 아주 간단히 잘 설명해준다. 이 영상과 MDN문서 로 기본을 구현해봤다.

그리고 IntersectionObserver 를 컴포넌트 내부에서 구현하다 보니 간단한 로직인데도 불구하고 컴포넌트가 두꺼워지는 문제가 생겼다. 따라서 customHook 으로 만들어서 컴포넌트에서 분리했다. 분리함으로써 다른 프로젝트에서도 사용할 수 있게되는 재사용성을 얻을 수 있었다.

기타..

html 의 meta 에 대해 조금 더 알게되었다.

 <meta
   name="description"
   content="User's comment data list with infinite scrolling"
 />

이렇게 작성하면, slack 같은 곳에서 해당 링크를 보내면 설명란에 content에 적은 내용이 나온다. 아래처럼

정리 링크

1. IntersectionObserverAPI 로 무한스크롤 구현

2. useEffect내에서 state의 dependency 문제