[React] 무한스크롤 - intersectionObserver사용하기, (Feeds.js:45 Uncaught (in promise) TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.)

Feeds.js:45 Uncaught (in promise) TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

다음과 같은 에러가 떴다.

  let options = {
    root: null,
    rootMargin: '0px',
    threshold: 1,
  };

  const observer = new IntersectionObserver(callback, options);

  function startObserve() {
    observer.observe(feedEndRef);
  }

  return (
    <div className="feeds">
      {feeds && feeds.map(feed => <Feed key={uuid()} feed={feed} />)}
      <div className="feed-end" ref={feedEndRef}>
        feedEnd
      </div>
    </div>
  );
}

아래 레퍼런스에 달아놓은 글 - 벨로퍼트님의 글과 스택오버플로우의 질문답변에서 해결책을 찾았다.

intersectionObserver 인스턴스로 observe할때 넘겨주는 인자는 DOM 노드여야 한다.
시멘틱 html태그로는 작동하지 않는데, feedEndRef를 useRef로 생성해 그대로 넣어주어 발생한 에러였다.

useRef() 를 사용하여 Ref 객체를 만들고,
이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주었을때, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가리키게 된다.

즉, observer.observe(feedEndRef.current)로 변경해주면 정상적으로 작동된다.

Reference

• https://react.vlpt.us/basic/10-useRef.html
• https://github.com/deepsweet/hocs/issues/15