useInView와 스크롤 이슈

useInView는 Intersection Observer API 에서 제공되는 hook이다.
(react-intersection-observer 모듈)

인스타그램이나, 쇼핑 앱의 홈화면 등 모바일 화면에서 무한스크롤 적용을 위해 많이 사용하는 듯 하다.
무한스크롤의 의미를 다시 한번 짚어보자면,
우리 웹사이트는 첫 화면부터 유저에게 보여줄 내용이 많아요! 하고 모든 데이터를 한번에 다 보여주려고 하면,
유저쪽 클라이언트에 큰 부담이 되어 오히려 느려지게 되거나 데이터 없는 흰 화면만 보여줄 수도 있게 된다. 그래서 스크롤을 더 내리게 될 때마다 더 필요한 데이터를 호출하는 방식이 무한스크롤 이다.

useInView 훅은 리액트 컴포넌트의 "inView" 상태를 모니터링해주는 훅이다. 즉 요소가 뷰포트에 진입/제외 되는 시점을 파악시켜준다.

import React, { uesEffect } from 'react';
import { useInView } from 'react-intersection-observer';

const Home = () => {
  const { ref, inView } = useInView({
     threshold: 0,
     triggerOnce: true, // 기본 : false
     // ..
  });

  useEffect(() => {
    // 예를 들어
    if(inView) onLoadMoreData()
  }, [inView]);
  
  return (
    <Section ref={ref}>
      {inView && <Widget />}
      // ..
    </>
  );
};

위 예제를 살펴보면
viewport에 보여질 때를 체크할 element에 ref속성을 걸어주고, 이 요소가 뷰포트 안에 보였을 때 inView state가 true 값이 되는 걸 조건으로 사용하여 특정 컴포넌트나 엘리먼트를 렌더하는 코드이다.

출처: https://cross-code.github.io/posts/IntersectionObserver/

methods

• observe(targetElement) : 타겟 엘리먼트에 대한 관찰을 시작.

props

• root : 타깃 엘리먼트를 관찰하는 viewport element. 기본은 브라우저 뷰포트임.
• threshold : 0~1 값으로, 뷰포트에 target element가 얼마나 보였을 대 노출되었다고 판단할 것인지에 대한 값. (1로 갈수록 요소가 100% 보일 때 노출되었다고 판단함을 의미)
• triggerOnce : observer가 한번만 실행됨을 의미. 디폴트가 false.
• initialInView : inView의 초기값을 설정. 처음부터 target element가 보일 것으로 예사오디면 true부여해주어도 된다. (기본이 false)
  이 외에도 더 있음(https://react-intersection-observer.vercel.app/?path=/story/introduction--page)