리액트에서 Intersection Observer

created
category
worklog
tags
IntersectionObserverReact.jsjavascript

인터섹션 옵저버를 예전에 소개글을 보았을 때나 시도 해보고 처음 실무에서 사용했다.

position: sticky로만 처리할 수 있으면 좋으련만 스티키가 되었을 때 특정 클래스도 추가해줘야되는 작업이었고
SPA에서 윈도우 스크롤 이벤트로 처리하는게 좀 부담스럽게 느껴져 써보게 됐다.

중요한건 언마운트 오류를 발생시키지 않으려면 useEffect에서 리턴될때 끊어주는 작업이 필요하다. 일단 이렇게만 적어놓고 추후 이 글 재정리해야겠다.

const fixedElement = () => {
  const header = document.querySelector('header.pageHeader');

  if (!header) {
    return;
  }

  const io = new IntersectionObserver((entries) => {
    setFixed(!entries[0].isIntersecting);
  });

  io.observe(header);

  return io;
};

useEffect(() => {
  const fixedDOM = fixedElement();

  return () => {
    fixedDOM.disconnect();
  };
}, []);

참고