react-intersection-observer 에서 initialInView 설정하여 초반 2회 호출 방지하기

TL;DR

• react-intersection-observer로 무한 스크롤 구현할 때 fetch 함수가 초반 2회 호출될 경우, 이를 방지하기 위해 initialInView 를 true로 설정하는 방법도 있다.

들어가며

리액트에서 무한 스크롤 구현을 위해 react-intersection-observer를 활용하는 경우, 맨 처음에 fetch 함수 호출이 2회 되는 경우가 있다. 이를 해결하는 방법 관련하여 이전과 다르게 시도해 본 경험을 기록하고자 한다.

본론

• 문제
  이번 경우에도 맨 처음에 fetch 함수가 2회 호출되었다.
  

• 원인
  처음 마운트 시점에 fetch 함수를 호출하고, 로딩되는 동안에 inView가 viewport에 보여서 다시 호출되는 경우였다.

• 해결 방안
  이전에 무한 스크롤을 구현했을 때는 loading 값을 활용하여 2회 호출을 방지했었다.

  useEffect(() => {
    if (inView && !loading) {
      fetchFunction();
    }
  }, [...]);

  그런데 이번에는 라이브러리 자체 api를 활용해 봤다.

  const { ref, inView } = useInView({
    initialInView: true,
  });

  initialInView 의 기본값이 false로 되어 있는데 첫 화면에서 true로 변경되면서 fetch 함수가 호출되는 것이기 때문에, 기본값을 true로 변경했다. 문서에서도 엘리먼트가 첫 화면에 보일 것으로 기대되면 이 속성을 활용하라고 나와있다.

  이렇게 적용했더니 첫 화면에서도 한 번만 호출됐다.
  

  단순히 loading flag를 활용하여 방지할 수도 있지만, 문서에 나와있는 방법을 사용하는 것이 더욱 좋지 않을까 생각한다.

  부끄럽지만 이전에는 initialInView를 잘 몰랐었는데, 혹시 몰랐던 분들은 이번 기회에 이 방식을 사용해 봐도 좋을 것 같다.