IntersectionObserver 기반 Hook 도입을 통한 메인 스레드 부하 제거 및 가시성 감지 최적화

Context

기존 scroll listener와 getBoundingClientRect() 조합의 가시성 체크 방식은 매 틱마다 동기적 레이아웃 계산을 강제하는 구조적 한계 존재. 이로 인해 메인 스레드 점유율 상승 및 스크롤 성능 저하(Jank)가 발생하는 병목 현상 발생.

Technical Solution

• 브라우저 API인 IntersectionObserver를 활용하여 메인 스레드 외부에서 비동기적으로 가시성 교차 지점 감지
• useLatest 패턴을 통한 콜백 참조 관리로 React의 Stale Closure 버그를 원천적으로 차단하는 설계 적용
• Boolean 기반이 아닌 Callback 기반 인터페이스 설계를 통해 threshold 및 intersectionRatio에 따른 가시성 정의의 유연성 확보
• SSR 환경에서의 런타임 에러 방지를 위해 렌더링 단계가 아닌 Effect 단계에서만 Observer를 생성하는 SSR-safe 구조 구현
• 불필요한 메모리 누수 방지를 위한 자동 unmount cleanup 및 수동 disconnect를 위한 stop() 함수 제공