react-intersection-observer와 IntersectionObserver

[sunmerrr]

스크롤 이벤트에 특정 이벤트를 줘야해서 검색하다가 IntersectionObserver 라는것을 추천하길래 react-intersection-observer와 어떻게 다른지 비교해봤다.

차이점

항목	IntersectionObserver (브라우저 API)	react-intersection-observer (라이브러리)
의존성	없음 (가볍고 빠름)	필요 (react-intersection-observer 설치)
사용방식	수동 등록 + 해제	React 생명주기에 맞춘 hook
유연성	JS 환경 어디든 사용 가능	React에서만 사용 가능
상태 연결	직접 처리	자동 처리
SSR 환경	직접 조심해서 써야 함	SSR-safe 처리가 내장되어 있음
기능	관측만 함	관측 + 편의 기능 (thresholds, delays 등)
Custom 로직 통합	자유도 높음 (조건부 관측 등)	내부 추상화 때문에 제한 있음

비교해보니 성능이나 번들 크기가 민감할때에만 브라우저 API 가 더 괜찮은 것 같다. 아니면, 정말 가벼운 단일 감지 요소일 때 정도 괜찮을 것 같다.
기본적으로 React 를 사용하는 프로젝트에서는 라이브러리를 사용하는게 좋아보인다.

결론: 단순한 동작 제어만 필요하다면, IntersectionObserver Web API 자체를 쓰는 게 조금 더 가볍고 유연하다.
React 생명주기와 밀접하게 연결되어야 한다면, react-intersection-observer를 쓰는 게 생산성이 높아 보인다.