[JavaScript] Virtual Scroll 구현하기(feat.Intersection Observer)

과제도중.. 디비 테이블을 불러오는 과정에서 적절한 where문을 걸어주지 않아 수만건의 데이터가 한번에 불러와지는 문제가 있었다. 이로 인해 DOM을 그리는 과정에서 시간이 몇 초 이상 걸리거나 심할 경우 브라우저 탭이 먹통이 되기도 했다. 물론 데이터를 잘못 불러왔기 때문에 생긴 문제였지만 실제로 이렇게 많은 데이터가 필요한 경우에는 어떻게 해야할까? 이 때 사용할 수 있는 것이 Paging, Virtual Scroll이라고 한다. 그 중에서 오늘은 Virtual Scroll에 대해 알아보았다. 

 

Virtual Scroll이란?

가상 스크롤은 화면에서 보이지 않는 부분의 내용을 출력하지 않고, 화면에 보여질 때만 출력하는 방식의 스크롤을 말한다. 많은 양의 리스트 데이터를 화면에 그리는 경우, 모든 항목을 그리면 성능 상 문제를 초래하기 때문에 사용한다. 

https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/

https://velog.io/@d0or_hyeok/JS-Virtual-Scroll-%EB%A7%8C%EB%93%A4%EA%B8%B0

그림에 나온 것처럼 viewport영역이 사용자에게 보이는 부분이다. 직접 구현하기 위해서는 scroll의 변화에 따라 viewport영역에 들어온 요소들을 계산해서 처리해야한다.

 

대충 이해는 하겠는데 직접 구현하려고 하니 머리가 아팠다.. 

이때 알게된 것이 Intersection Observer API!!

 

Intersection Observer란?

- 대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 viewport와의 교차 영역에 대한 변화를 비동기적으로 감지할 수 있게 도와주는 API다. 

- 한번 생성되면, 루트 내에서 설정된 비율 만큼의 가시성을 계속 감지한다. 설정 값은 변경될 수 없으므로, 생성된 감시자 객체는 가시성 정도의 변화를 감시하는 데에만 쓰일 수 있다. 하지만 동일한 감시자 객체로 여러 대상 요소를 감시할 수 있다. 

- 비동기적으로 실행되기 때문에 메인 스레드에 영향을 주지 않으면서 변경 사항을 관찰할 수 있다. 

 

// IntersectionObserver 를 등록한다.
const observerHandler = new IntersectionObserver(entries => {
  entries.forEach(entry => {
  	// 관찰 대상이 viewport 안에 들어온 경우 보이게 하고, 그렇지 않은 경우 숨긴다.
    entry.isIntersecting ? tdList.css("display", "block") : tdList.css("display", "none");
  })
})

// 관찰할 대상을 선언하고, 해당 속성을 관찰시킨다.
const boxElList = document.querySelectorAll('.list');
boxElList.forEach((el) => {
  observerHandler.observe(el);
})

 

너무 머리 아팠던 내용인데 API덕분에 간결하게 해결할 수 있었다. 아직 프론트는 너무 어렵다.. 계속 외면만 하지 말고 하나씩 차근차근 공부해가야겠다..

 

---

참고

https://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/

https://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/