Redux Thunk를 활용한 무한 스크롤 기능 추가 방법

18 Oct 2023

redux

무한 스크롤 기능은 사용자가 스크롤을 내리면 자동으로 추가 컨텐츠를 로드해주는 기능입니다. 이 기능을 Redux Thunk를 활용하여 구현할 수 있습니다. Redux Thunk는 Redux 미들웨어의 일종으로, 비동기 작업을 처리할 때 유용하게 사용됩니다.

먼저, Redux Thunk를 프로젝트에 추가해야 합니다. 다음 명령어를 사용하여 Redux Thunk 패키지를 설치합니다.

npm install redux-thunk

또는

yarn add redux-thunk

설치가 완료되면, Redux Thunk를 사용하기 위해 redux-thunk 모듈을 import 해줍니다.

import thunk from 'redux-thunk';

다음으로, 액션 타입과 액션 생성자 함수를 만들어야 합니다. 무한 스크롤을 구현하기 위해 추가 컨텐츠를 로드하는 액션 타입을 정의합니다.

export const LOAD_MORE_CONTENT = 'LOAD_MORE_CONTENT';

그리고 해당 액션 타입을 처리하는 액션 생성자 함수를 작성합니다. 이 함수는 비동기 작업을 수행하고, 데이터를 로드한 뒤에 액션을 디스패치하는 역할을 합니다. 예를 들면, API에서 추가 데이터를 가져와서 상태에 추가하는 작업을 수행할 수 있습니다.

export const loadMoreContent = () => {
  return async (dispatch) => {
    // API로부터 데이터를 가져오는 비동기 작업 수행
    const data = await fetchData();

    // 데이터 가져오기가 완료되면 LOAD_MORE_CONTENT 액션을 디스패치
    dispatch({ type: LOAD_MORE_CONTENT, payload: data });
  };
};

마지막으로, 리듀서를 업데이트하여 새로운 데이터를 상태에 추가하는 작업을 처리해야 합니다. 이를 위해 LOAD_MORE_CONTENT 액션 타입에 대한 케이스를 추가합니다.

const initialState = {
  content: [],
  // ...
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    // ...
    case LOAD_MORE_CONTENT:
      return {
        ...state,
        content: [...state.content, ...action.payload]
      };
    // ...
    default:
      return state;
  }
};

이제 Redux Thunk를 활용하여 무한 스크롤 기능을 추가할 준비가 되었습니다. 컴포넌트에서 스크롤 이벤트를 감지하고, loadMoreContent 액션 생성자 함수를 디스패치하는 코드를 추가하면 됩니다.

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { loadMoreContent } from './actions';

const InfiniteScrollComponent = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const handleScroll = () => {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        dispatch(loadMoreContent());
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [dispatch]);

  return (
    // ...
  );
};

export default InfiniteScrollComponent;

위의 코드에서는 컴포넌트가 마운트될 때 스크롤 이벤트 리스너를 등록하고, 언마운트될 때 리스너를 제거하도록 설정되어 있습니다. 스크롤 이벤트가 발생할 때 화면의 맨 아래에 도달하면 loadMoreContent 액션을 디스패치하여 추가 컨텐츠를 로드하게 됩니다.

이제 Redux Thunk를 활용하여 무한 스크롤 기능을 구현했습니다. 이제 사용자가 스크롤을 내리면 자동으로 추가 컨텐츠가 로드되는 기능을 제공할 수 있습니다.