React-Intersection-Observer을 이용해 무한스크롤 구현하기

nagosu·2023년 11월 19일

React react intersection observer 무한스크롤

무한스크롤이란?

웹 페이지나 애플리케이션에서 사용자가 스크롤할 때마다 새로운 콘텐츠를 계속해서 불러오는 방식을 말한다.

사용자가 페이지의 끝에 도달하면 자동으로 다음 콘텐츠를 로드하여 화면에 추가하는 방식으로, 페이지를 새로고침하거나 추가적인 페이지로 이동할 필요 없이 연속적인 스크롤을 통해 콘텐츠를 볼 수 있다.

무한스크롤의 특징

사용자 경험 개선 : 페이지를 계속해서 새로고침하거나 다른 페이지로 이동할 필요 없이 지속적으로 콘텐츠를 탐색할 수 있어 사용자 경험을 개선한다.
연속적인 콘텐츠 흐름 : 소셜 미디어, 뉴스 사이트, 이미지 갤러리 등에서 효과적으로 사용되어 사용자가 지속적으로 콘텐츠를 탐색할 수 있게 한다.
페이지 로드 시간 절감 : 처음 페이지를 로드할 때 필요한 모든 콘텐츠를 한 번에 로드하지 않고, 필요에 따라 점진적으로 추가 콘텐츠를 로드한다.

무한스크롤의 단점

메모리 사용량 : 많은 양의 콘텐츠가 계속 추가되면서 브라우저의 메모리 사용량이 증가할 수 있다.
탐색 및 접근성 문제 : 특정 위치로 돌아가기 어렵거나, 스크린 리더와 같은 접근성 도구 사용자에게 어려움을 줄 수 있다.
성능 문제 : 잘못 구현되면 스크롤 성능에 부정적인 영향을 줄 수 있다.

무한 스크롤은 사용자의 스크롤 동작에 의해 새로운 콘텐츠가 계속해서 로드되는 인터랙티브한 방식으로, 사용성과 성능의 균형을 맞추어 적절히 구현하는 것이 중요하다.

그러면 이제 React-Intersection-Observer 에 대해 알아보자.

React-Intersection-Observer이란?

React-Intersection-Observer는 React 를 위한 라이브러리로, 웹 페이지의 특정 요소가 사용자의 Viewport(화면) 내에 들어오는지를 감지하는 기능을 제공한다.

이 라이브러리는 브라우저의 기본 API인 Intersection Observer API를 기반으로 하여, React 컴포넌트에서 쉽게 사용할 수 있도록 만들어졌다.

주요기능

요소의 가시성 감지 : 페이지 내 특정 요소가 사용자의 화면에 보이는지를 감지한다. 예를 들어, 사용자가 스크롤을 내려 특정 이미지나 섹션이 화면에 나타날 때 이를 감지할 수 있다.
무한 스크롤 구현 지원 : 페이지의 맨 아래에 도달했을 때 추가 콘텐츠를 로드하는 무한 스크롤 기능을 구현하는 데 유용하다.
성능 최적화 : 전통적인 스크롤 이벤트 리스너와 달리, Intersection Observer API 는 성능 저하 없이 요소의 가시성 변화를 감지한다. 이는 특히 많은 양의 동적 콘텐츠를 다룰 때 중요한 장점이다.

React-Intersection-Observer 사용 방법

설치 방법

// npm을 사용하는 경우
npm install react-intersection-observer

// yarn을 사용하는 경우
yarn add react-intersection-observer

사용법

1. 라이브러리 import

import { useInView } from 'react-intersection-observer';

파일의 상단에 useInView 를 import 해준다.

2. useInView Hook 사용

const [ref, inView] = useInView({
  /* 옵션 설정 가능 */
});

useInView 는 React 컴포넌트 내에서 특정 DOM 요소의 가시성(화면에 보이는지 여부)을 감지하는 데 사용되는 Hook이다.

이 Hook을 사용하면, 특정 요소가 사용자의 화면(뷰포트)에 들어왔는지를 감지하고, 해당 정보를 바탕으로 다양한 동작을 수행할 수 있다.

useInView Hook을 호출하면, ref 와 inView 라는 두 가지 주요한 반환값을 얻을 수 있다.

ref : 이것은 React의 ref 객체이다. 감지하고자 하는 DOM 요소에 이 ref를 할당해야 한다.
inView : 이것은 불리언(boolean) 값이다. 감시하고 있는 요소가 화면에 보일 때 true가 되고, 화면에서 벗어날 때 false가 된다.

3. 옵션 설정

useInView 는 다양한 옵션을 설정할 수 있는데, 이 옵션들은 useInView 함수에 객체 형태로 전달된다.

threshold : 요소의 어느 부분이 뷰포트에 들어와야 inView 가 true가 될지 결정한다. 0에서 1 사이의 값으로 설정할 수 있으며, 예를 들어 0.5는 요소의 50%가 화면에 들어왔을 때 inView 를 true로 설정한다.
triggerOnce : 이 옵션을 true로 설정하면, 요소가 한 번 화면에 나타나고 나면 감지가 중지된다. 기본값은 false이다.
delay : 감지에 딜레이를 추가할 수 있다. 예를 들어, 요소가 화면에 짧게 나타났다가 사라지는 경우를 필터링할 때 유용하다.

4. 컴포넌트에 ref 연결

<div ref={ref}>감시할 요소</div>

5. 로직 구현

inView 상태를 사용하여 요소가 화면에 보일 때 원하는 로직을 실행한다.

useEffect(() => {
  if (inView) {
    // 화면에 보이는 경우 실행할 로직
  }
}, [inView]);

예시 코드

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

const ExampleComponent = () => {
  const { ref, inView } = useInView({
    threshold: 0.5, // 화면의 50%가 보일 때 감지
  });

  useEffect(() => {
    if (inView) {
      console.log('요소가 화면에 보입니다!');
    }
  }, [inView]);

  return <div ref={ref}>감시할 요소</div>;
};

export default ExampleComponent;

결론

React-Intersection-Observer는 사용하기 간편하고, 웹 애플리케이션의 동적 요소 감지에 매우 유용한 도구이다.

이를 통해 무한 스크롤, 이미지 지연 로딩 등의 기능을 성능 저하 없이 구현할 수 있고, 사용자 경험을 향상시킬 수 있다.

페이지 스크롤 시 이미지를 Lazy-Loading 할 때
무한 스크롤을 통해 새로운 컨텐츠를 불러올 때
광고의 수익을 계산하기 위해 광고의 가시성을 참고할 떄
사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때

React-Intersection-Observer를 사용하면 스크롤 이벤트 리스너를 직접 관리할 필요 없이 효율적으로 요소의 가시성을 감지할 수 있기 때문에 적절한 상황에 맞게 라이브러리를 활용해보자.

nagosu

프론트엔드 개발자..일걸요?

이전 포스트

React.FC 사용에 대하여

다음 포스트