개발자

리액트에서 브라우저 Intersection Observer 사용 질문,

2024년 11월 23일조회 23

안녕하세요, 채팅 관련 프로그램을 개발하고 있습니다. 다름이 아니라 Intersection Observer를 통한 화면 최적화를 진행하고 있습니다. 원하는 최적화 방식은 isIntersector의 true/false 여부를 통해 화면에 메시지 컴포넌트를 제공하고 있습니다. 동작은 정상적입니다. 그런데 문제가 있습니다. 부모에 Intersection Observer를 두나 자식에 Intersection Observer를 두나 아래 2가지 버그가 동일하게 나타납니다. 1. 다소 긴 채팅 또는 무거운 채팅 메시지는 화면 영역에 나타났음에도 isIntersector가 가끔 false 인경우가 있습니다. 그래서 부모가 높이는 가지고 있으나 내용이 빈 경우가 종종있습니다. 2. 메시지가 화면에서 딱 사라지는 순간 isIntersector가 무한 루프 되면서 true/false를 번갈아 가면서 반환합니다. 브라우저는 엣지입니다. 크롬은 불가능합니다. 1번 같은 경우는 산발적으로 발생하고, 2번은 저 상태가 되면 무조건 발생하는 에러입니다. 검색을 이리저리 해봤는데 도통 해결방법이 나오지 않아 여기에 문의드립니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

profile picture

익명

작성자

2024년 11월 24일

첨언. 2번 문제는 rootMargin이 의미가 없습니다. 교차 영역에 가면 무조건 2번문제가 발생합니다. 1번 문제는 메시지 크기가 문제가 아니라 스크롤을 위 아래로 조절 할 때 발생하는 문제입니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 11월 23일

안녕하세요. 질문 주셔서 감사합니다. 살펴보니 Intersection Observer를 사용하실 때 발생하는 문제 같습니다. Intersection Observer는 브라우저에서 제공하는 API이므로 리액트에 특화된 해결 방법은 없을 수 있습니다. 그러나 일반적인 해결책을 제공드릴 수 있겠습니다. 1. 첫 번째 문제 관련하여, 채팅 메시지의 높이가 바뀌었을 때 observer를 업데이트하지 못할 가능성이 있어 보입니다. 이 경우, intersectionRatio나 isIntersecting 값이 정확하지 않을 수 있습니다. 이 문제를 해결하기 위해서는, 메시지의 크기가 변경될 때마다 observer를 다시 설정하는 것입니다. 2. 두 번째 문제에 대해, 스크롤 이벤트 지점에서 반복적으로 교차영역 감지(intersection)가 발생할 수 있는 것 같습니다. 이런 현상은 '스크롤 재압' 현상일 수도 있어 보입니다 - 스크롤 이벤트가 반복되는 현상입니다. 이러한 문제를 해결하기 위해서는 debounce 함수를 활용하거나 'rootMargin' 옵션을 조정해 교차 영역이 시작되는 지점을 당기는 방법 등이 있습니다. 다음은 debounce 함수를 사용하는 예시입니다. ```javascript function debounce(func, wait = 20, immediate = true) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; ``` 위와 같이 debounce 함수를 이용해 스크롤 이벤트의 연속된 발생을 제어할 수 있습니다. 설명드린 사항들이 도움이 되셨으면 좋겠습니다. 추가적인 질문이 있다면 언제든지 말씀해주세요.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!