[React] 무한스크롤과 react-intersection-observer

조아영·2024년 9월 3일

React

📌 무한스크롤

화면이 페이지 하단에 도달했을 때, 콘텐츠가 끊기지 않고 계속 로드되는 사용자 경험(UX) 방식.
페이지를 새로고침하거나 추가적인 페이지이동 없이 스크롤을 통해 끝없이 새로운 콘텐츠를 볼 수 있습니다.

◼ 특징

사용자 경험 향상
버튼을 클릭하거나 새로운 페이지로 이동하여 로딩을 기다릴 필요 없이, 자연스럽게 더 많은 콘텐츠를 접할 수 있는 경험은 사용자 만족도를 높입니다.
연속적인 콘텐츠 흐름
스크롤만으로 끊김 없이 계속해서 콘텐츠를 탐색할 수 있는 경험은 사용자의 이탈을 줄이고, 더 오래 머물며 콘텐츠를 소비하도록 유도합니다.
서버 부하 감소
처음부터 모든 콘텐츠를 로드하지 않고, 필요에 따라 추가로 콘텐츠를 불러오는 방식은 서버 부하를 줄이는 데 도움이 됩니다.

◼ 단점

탐색의 불편함
페이지네이션을 사용하면 특정 콘텐츠의 위치를 쉽게 기억할 수 있지만, 무한 스크롤에서는 특정 콘텐츠를 다시 찾는 것이 어렵습니다.
하단 접근의 어려움
무한 스크롤은 푸터나 추가적인 정보를 보기가 어려워질 수 있습니다.
메모리 사용량
콘텐츠가 많아질수록 로드 시간이 길어지고, 이는 사용자에게 불편을 초래할 수 있습니다.

◼ 보완점

"더보기"버튼 사용

사용자가 하단에 도달했을 때 콘텐츠가 자동으로 로드되는 대신, "더보기" 버튼을 눌러야 추가 콘텐츠가 로드되므로 하단 정보에 쉽게 접근할 수 있습니다.
"더보기" 버튼을 통해 로드되는 콘텐츠 양을 조절할 수 있어, 높은 접근성을 유지할 수 있습니다.

📌 react-intersection-observer

React-Intersection-Observer는 React 애플리케이션에서 특정 요소가 사용자의 Viewport(화면) 내에 들어오는지 여부를 감지하는 데 유용한 라이브러리입니다.
이 라이브러리는 브라우저의 기본 API인 Intersection Observer API를 기반으로 하여 React 컴포넌트에서 쉽게 사용할 수 있도록 설계되었습니다.

◼ 특징

요소의 가시성 감지
웹 페이지 내 특정 요소가 사용자의 화면에 보이는지 여부를 감지합니다.
무한 스크롤 구현 지원
사용자가 페이지의 최하단에 도달했을 때 추가 콘텐츠를 자동으로 로드하는 무한 스크롤 기능을 구현하는 데 유용합니다.
성능 최적화
전통적인 스크롤 이벤트 리스너와 달리, Intersection Observer API는 성능 저하 없이 요소의 가시성 변화를 감지합니다. 이는 특히 많은 양의 동적 콘텐츠를 다룰 때 중요한 이점입니다.

◼ 사용법

1. 설치

// npm
npm install react-intersection-observer

// yarn
yarn add react-intersection-observer

2. import

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

3. Hook 사용 및 옵션설정

Hook

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

useInView는 React 컴포넌트에서 특정 DOM 요소의 가시성(화면에 보이는지 여부)을 감지하기 위해 사용되는 Hook입니다.
이 Hook을 통해 특정 요소가 사용자의 화면(뷰포트)에 들어왔는지 여부를 쉽게 파악할 수 있습니다.
ref : React의 ref 객체로, 감지하려는 DOM 요소에 할당해야 합니다.
inView : boolean 값으로, 감시 중인 요소가 화면에 보일 때 true, 화면에서 벗어날 때 false가 됩니다.

옵션

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

◼ 예제

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

const Component = () => {
    const { ref, inView } = useInView({
        // 옵션설정
        threshold: 1,
    });

    useEffect(() => {
        // 가시성 감지
        if (inView) {
            console.log("요소 감지");
        }
    }, [inView]);

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

export default Component;