Intersection Observer API는 대상 요소와 상위 요소 또는 최상위 문서의 viewport 교차점의 변경 사항을 비동기적으로 관찰하는 방법을 제공한다.
컨텐츠 요소가 뷰포트(현재 화면에 보여지고 있는 영역)에 포함되는지 유무를 알 수 있는 정보를 제공한다.
즉, 현재 화면에 보여지고 있는지 여부를 판단하는 기능을 제공한다.
또한 페이지가 스크롤될 때 이미지나 기타 콘텐츠가 지연 로딩된다.
Intersection Observer 기능을 잘 구현하고 있는 라이브러리인 react-intersection-observer-hook 이용하여 불필요한 API가 호출되는 것을 방지할 수 있다. (현재 뷰포트에 보여지는 아이템만 호출하게 된다.)
yarn add react-intersection-observer-hookconst PokeCard = (props:PokeCardProps) => {
const navigate = useNavigate();
const [ref, { entry }] = useIntersectionObserver();
const isVisible = entry && entry.isIntersecting;
const [pokemon, setPokemon] = useState<PokemonDetailType | null>(null)
const handleClick = () => {
navigate(`/pokemon/${props.name}`);
}
useEffect(() => {
if(!isVisible) {
return;
}
(async () => {
const detail = await fetchPokemonDetail(props.name);
setPokemon(detail);
})()
}, [props.name, isVisible])
if(!pokemon) {
return (
<Item ref={ref} color={'#fff'}>
<Header>
<PokeNameChip name={'포켓몬'} color={'#ffca09'} id={0}/>
</Header>
<Body>
<PokeImageSkeleton />
</Body>
<Footer>
<PokeMarkChip />
</Footer>
</Item>
)
}
return (
<Item onClick={handleClick} color={pokemon.color} ref={ref}>
<Header>
<PokeNameChip name={pokemon.koreanName} color={pokemon.color} id={pokemon.id}/>
</Header>
<Body>
<Image src={pokemon.images.dreamWorldFront} alt={pokemon.name} />
</Body>
<Footer>
<PokeMarkChip />
</Footer>
</Item>
)
}
https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver
IntersectionObserver - Web API | MDN
Intersection Observer API (en-US)의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수
developer.mozilla.org
https://www.npmjs.com/package/react-intersection-observer-hook
react-intersection-observer-hook
  