[React] 웹 개발에서 스크롤시 사라지지 않는 툴팁 감추기: IntersectionObserver 활용

안녕하세요, 오늘은 Left Navigation Bar (LNB)에 있는 리스트에 적용한 Tooltip이 스크롤시에도 사라지지 않는 문제를 해결한 과정을 공유하려 합니다. 이 글에서는 Intersection Observer API를 활용한 방법이니 익숙하지 않으신 분들은 아래의 글을 참고해주세요!

 

[Web] IntersectionObserver API

 

 

---

소개

이 문제를 설명하자면 다음과 같았습니다.

1. LNB의 아이템에 호버 액션을 취하면 해당 아이템의 tooltip이 나타나야 합니다.
2. 그러나 호버 상태에서 스크롤 액션을 하면 툴팁이 사라지지 않는 문제가 발생했습니다.

각각의 Tooltip의 자신의 상태를 유지하는 접근 방식이 다르기 때문에 일어나는 현상이었습니다. 각  ToolTip 구성 요소를 볼 수 있는지 확인하기 위해 IntersectionObserver를 사용하여 요소가 더 이상 화면에 표시되지 않으면 Tooltip을 사라지게 하였습니다.

 

 

해결 과정

 

1. ParentRef라는 useRef를 생성합니다. 이 ref는 스크롤 여부를 감지하기 위해 Intersection Observer와 연결될 요소를 가리킵니다.

  const ParentRef = useRef(null);

2. Intersection Observer를 사용하여 스크롤 상태를 감지하는 callback 함수를 정의합니다. 이 함수는 화면에 요소가 보여지는지 여부를 판단하여 inView 상태를 변경합니다

 

 

  const [inView, setInView] = useState(false);

  const cb = (entries) => {
    const [entry] = entries;
    entry.isIntersecting ? setInView(true) : setInView(false);
  };

 

3. useEffect를 사용하여 Intersection Observer를 생성하고 ParentRef를 관찰합니다. options 객체에서 root는 루트 요소를 가리키며, null로 설정하여 브라우저의 뷰포트를 루트로 사용합니다. rootMargin은 뷰포트와 요소 사이의 여백을 나타냅니다. 여기서는 0px로 설정하여 추가 여백 없이 요소와 뷰포트의 교차 상태를 감지합니다.

 

let observer = new IntersectionObserver(callback, options);

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: '0px',
    };
    const ref = ParentRef.current;
    const observer = new IntersectionObserver(cb, options);

    if (ref) observer.observe(ref);

    return () => {
      if (ref) observer.unobserve(ref);
    };
  }, [ParentRef]);

4. Tooltip 컴포넌트의 display 속성에 inView 상태를 적용합니다. inView가 true이면 툴팁이 화면에 보여지도록 하고, false이면 숨깁니다.

 

function AccordionItem({ itemName, tooltip }) {
  const ParentRef = useRef(null);
  const [inView, setInView] = useState(false);
  ...

  return (
    <div ref={ParentRef}>
      <Text>{itemName}</Text>
      <Tooltip
        display={inView ? 'block' : 'none'}
        label={tooltip}
        hasArrow
      >
        <Text>{itemName}</Text>
      </Tooltip>
    </div>
  );
}

export default AccordionItemByAnalysisList;

Intersection Observer API를 통해 간단하게 Tooltip 요소의 상태를 감지하여 이 문제를 해결할 수 있었습니다. 이와 같은 기술적인 도구를 활용하면 웹 애플리케이션에서 발생하는 다양한 문제를 효과적으로 해결할 수 있습니다. 앞으로도 기술적인 도전과 해결 과정을 공유하겠습니다.

 

---

 

Reference

• Stackoverflow
• MDN- Intersection Observer API