특정 요소가 보이는 것을 인식하는데 잘 맞지 않습니다.

Question

안녕하세요. React에서 타겟 요소가 보이지 않을 때 컴포넌트 A를 표시하고 싶습니다. getBoundingClientRect를 이용해서 다음과 같이 구현하고 위의 고정된 컴포넌트 높이만큼 오프셋을 줬는데도 타겟 요소가 사라지는 타이밍과 컴포넌트가 표시되는 타이밍이 미묘하게 맞지 않습니다.

잘못 구현했거나 수정해야하는 부분이 있을까요? 코드 확인해주시면 감사하겠습니다.

이은재 · Answer

올려주신 코드만으로는 파악하기 힘들지만, 타겟 컴포넌트 전후로 여백이 있을 수도 있고, 인식되는 스크롤 위치 값이 완전 연속적이지 않기 때문에 각 컴포넌트가 보이지 않고 나타나는 타이밍이 맞지 않을 수 있을 것 같습니다.

가장 간단하게는 오프셋 값을 조금 조정해볼 수 있기도 하겠지만, 그것보다는 사용하신 getBoundingClientRect의 대안으로 나온 Intersection Observer API를 사용해보시는 걸 권장드립니다.

관련해서 읽어볼만한 링크 몇 개 추가합니다. 
https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API
https://heropy.blog/2019/10/27/intersection-observer/
http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/