[TIL] IntersectionObserver와의 싸움..😤

가로로 슬라이드가 생기는 이미지 슬라이더를 만드는데 이미지는 4개 정도 있고, 각 이미지가 보여질 때마다 슬라이더 위에 있는 설명이 바뀌는 것을 구현해야 했다.

<ImageSlider>
          <ImageContainer ref={imageRef}>
            {items.map((item, index) => (
              <ImageWrapper key={index}>
                <Img
                  src={`/images/img_renewal${index}.png`}
                />
                <ImageTitle>{item.title}</ImageTitle>
              </ImageWrapper>
            ))}
          </ImageContainer>
        </ImageSlider>

처음에는 observer.observe(imageRef.current)로 해서 ImageContainer를 타겟요소로 삼고 threshold를 [0, 0.25, 0.5, 0.75, 1] 이런 식으로 배열로 준 다음 threshold의 몇번째 인덱스를 지나고 있는지를 알아내서 값을 변경해주고자 했었다. 이미지 하나하나를 관찰하는 방법이 직관적으로 낫다고 생각했으나 각각의 이미지에 ref를 주는 방식은 아닐 거 같다고 생각했기 때문이다.
그런데 threshold의 인덱스를 알아내는 메서드가 당연히 있을 거라고 생각했지만 그런 메서드는 존재하지 않았기 때문에 intersectionRatio를 이용해 인덱스를 구하는 함수를 만들었고... 멀리 돌아가는 느낌이 들었으나 해결할 수 있을 거라고 생각했는데...

useEffect(() => {
  const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        const { intersectionRatio, isIntersecting } = entry;
        const thresholdIndex = getThresholdIndex(intersectionRatio);
        if (isIntersecting)
          setDesc(items[thresholdIndex]?.desc);
      });
    },
    { threshold: [0, 0.25, 0.5, 0.75, 1] }
  );

  if (imageRef.current) observer.observe(imageRef.current);

  return () => {
    if (imageRef.current) observer.unobserve(imageRef.current);
  };
}, []);

const getThresholdIndex = ratio => {
  const thresholds = [1, 0.75, 0.5, 0.25, 0];
  let minDiff = 1;
  let minDiffIndex = 0;
  for (let i = 0; i < thresholds.length; i++) {
    const diff = Math.abs(ratio - thresholds[i]);
    if (diff < minDiff) {
      minDiff = diff;
      minDiffIndex = i;
    }
  }
  return minDiffIndex;
};

그런데 문제는 슬라이더의 마지막 요소가 뷰포트 안에 들어오는데도 isIntersecting이 false로 뜨는 것이었다. 다른 요소들은 threshold에 따라 콜백이 실행될 때마다 true로 잘 찍히는데 마지막 요소만 false로 되는 것은 아무리 고민해봐도 해결이 안 되었다.
그래서 다시 연습장에 그림을 그리면서 개념을 정리해보았는데, 가장 깔끔한 방법은 역시 이미지 요소 각각을 observe하는 것이라고 판단했고, ref는 기존처럼 Container에만 주는 대신 querySelectorAll을 통해 이미지 요소를 가져와 각각을 타겟요소로 삼았다.

useEffect(() => {
    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting)
            setDesc(items[entry.target.id]?.desc);
        });
      },
      { root: null, threshold: 0.9 }
    );

    if (imageRef.current) {
      const images = imageRef.current.querySelectorAll('img');
      Array.from(images).forEach((image: HTMLImageElement) =>
        observer.observe(image)
      );
    }

    return () => {
      if (imageRef.current) observer.disconnect();
    };
  }, []);

cleanup 함수는 unobserve가 아니라 모든 요소의 관찰을 중지시키는 disconnect로 변경했다. 그리고 인덱스를 구하는 복잡한 함수 대신 리턴문 안에서 각 이미지에 index를 id값으로 주고 isIntersecting이 true가 되는 경우 target의 id를 통해 설명을 바꿔주었다. threshold는 이미지가 90퍼센트 정도 가시성이 확인되었을 때마다 콜백을 실행할 수 있도록 해주었다. 처음했던 방식은 이미지가 전체 컨테이너에서 대략 이정도 퍼센트에 있다고 야매로 정해서 바뀌는 포인트도 어색했는데, 각각의 이미지를 타겟요소로 삼으니 직관적이고 깔끔한 방식으로 구현되었다. 스크롤 이벤트를 발생시킬 때 타겟요소를 어떤 걸로 할지에 대해서 정확한 판단이 필요했던 거 같다. 인덱스 구하는 함수를 만들 때부터 복잡하게 돌아간다는 느낌이 들었는데, 역시 더 간단한 방법은 존재했다.