[ToDo] 메인 페이지의 스터디 목록을 Intersection Observer로 무한 스크롤을 구현하자

[saseungmin]

• 메인 페이지의 스터디 목록을 Intersection Observer로 무한 스크롤을 구현하자

🎈 Scroll Event가 아닌 Intersection Observer?

1. Intersection Observer를 사용하면 호출 수 제한 방법 debounce, throttle을 사용하지 않아도 된다.

// 스크롤 함수 호출 지옥..
window.addEventListener('scroll', function() {
   return console.log('scroll!');
});

2. Intersection Observer에서는 reflow를 하지 않는다. Scroll Event에서는 현재의 높이 값을 알기 위해 offsetTop을 사용하는데 정확한 값을 가져오기 위해 매번 layout을 새로 그리게 된다. layout을 새로 그린다는 건 렌더 트리를 재생성한다는 것. 때문에 reflow 과정을 반복하면 브라우저의 성능이 저하와 화면의 버벅거림이 생김.

🎈 참고할만한 것들

• http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/
• https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• https://velog.io/@yejinh/Intersection-Observer%EB%A1%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
• react-intersection-observer npm