intersectionObserver에서 무한스크롤 구현 중 발생한 이슈들

1. useState에 배열을 추가할 시에 concat을 사용하지 않으면 추가로 데이터가 등록되지 않았음.

=> 재확인해보니 개발자 도구를 연 상태에서 intersectionObserver의 관찰 대상이 온전히 관찰되지 않아서 일어난 오류

concat과 관련 없음.

 

 

2. 스크롤 이벤트에서는 현재의 높이 값을 알기 위해 offsetTop  을 사용하는데 정확한 값을 가져오기 위해 매번 layout을 새로 그리게 된다.

3. useState를 useRef에 적용시켰을 때 타입 문제

=> 타입 지정 완료

  const [target, setTarget] = useState<HTMLElement | null | undefined>(null);

 

 

참고자료 :

https://velog.io/@minseok_yun/IntersectionObserver%EB%A1%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%A7%8C%EB%93%A4%EA%B8%B0