document scroll event 대신 new IntersectionObserver 사용해보기

new IntersectionObserver

무한 스크롤이나 스크롤 내릴 때 애니메이션을 넣고 싶은 경우에 document scroll event를 사용해 왔었는 데

구현하고자 하는 기능에 document scroll event를 사용했을 때는 한계가 있다고 느껴져

'코딩애플'님이 올려주신 new IntersectionObserver를 사용하기 전 실현 가능성을 체크하고자 테스트해보았다.

알기 쉽게 설명해 주셔서 따라 하기 어렵지 않았고

영상에서는 HTML/JS/CSS를 사용하셨고 내가 테스트할 때는 Next.js를 사용하여서 코드를 프레임워크에 맞춰 변형하는 과정에서 새롭게 알게 된 부분을 정리하려고 한다.

---

새롭게 알게 된 부분

• useRef()에 자식들을 선택하는 방법 (이전까지는 사용할 일이 없어서 몰랐다.)
  • ref.current.children을 사용하면 배열 형태로 자식 태그들이 출력된다.

• observer.observe() 파라미터에는 시맨틱 HTML 태그로는 동작하지 않는다. (DOM 노드를 넣어야 한다.)
  • ref.current 또는 ref.current.children [0]...

---

사용 후기

: 이전까지는 위에서도 언급했듯이 document scroll event를 사용하거나 글을 쓰는 방금 깨달은 거지만 스크롤 애니메이션 할 때 한번 사용해 봤었는 데 스크롤 위치에 따라 애니메이션이나 복잡한 작업이 들어가야 하는 경우 new IntersectionObserver가 조금 더 편했던 것 같다.

[React] IntersectionObserver를 사용하여 스크롤 애니메이션 구현하기