intersectionobserver api

React에서 Intersection Observer로 이미지 Lazyloading 구현하기 with 콜백 ref

이슈 COEAT 이라는 서비스를 개발하고 있었다. 약 50개의 이미지를 한 번에 불러오는 페이지가 있는데 이 부분에서 문제가 발생했다. 이미지의 크기가 너무 크다 보니까 50개의 이미지를 한 번에 요청하니 페이지가 멈춰버리는 것이었다. 이를 해결하기위해 서버 측에서 Image Resizing을 진행하기로 했고 클라 측에서는 Lazy loading을 추가하기로 했다. 사실 이미지의 리사이징만 완료되어도 성능이 대폭 개선될 것이다. 하지만 추후에 불러와야할 이미지들의 개수가 늘어가게 되었을 때에는 리사이징만으로는 한계가 있을 것이라고 판단했다. 이에 이전에 한 번 살펴보았던 Intersection Observer API를 사용해서 유저가 특정 위치에 도달했을 때 이미지를 로딩할 수 있도록 구현해보았다. In..