Immer를 활용한 무한 스크롤 구현 방법 알아보기

27 Sep 2023

immer

무한 스크롤은 웹 애플리케이션에서 페이지를 계속해서 스크롤하여 새로운 콘텐츠를 불러오는 기능입니다. 이를 구현하기 위해서는 사용자가 스크롤 할 때마다 서버에 요청을 보내고, 새로운 데이터를 받아와서 화면에 추가해야 합니다. 이러한 구현 과정에서 Immer라는 라이브러리를 사용하면 상태관리를 효율적으로 할 수 있습니다.

Immer란?

Immer는 불변성을 유지하면서 상태를 변경하는 것을 돕는 JavaScript 라이브러리입니다. Immer를 사용하면 객체를 수정하는 작업을 간단하게 할 수 있습니다. 이를 활용하여 무한 스크롤을 구현할 수 있습니다.

구현 방법

프로젝트에 Immer를 설치합니다.

npm install immer

Immer를 import 합니다.

import produce from 'immer';

초기 상태를 정의합니다.

const initialState = {
  data: [],
  page: 1,
  isLoading: false,
};

스크롤 이벤트를 감지하는 함수를 만듭니다. 스크롤이 페이지 하단에 도달하면 새로운 데이터를 불러오는 요청을 보내고 상태를 업데이트합니다.

const handleScroll = () => {
  const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
  if (scrollHeight - scrollTop === clientHeight) {
    fetchData();
  }
};

상태를 업데이트하는 함수를 만듭니다. Immer를 활용하여 불변성을 유지하면서 상태를 변경합니다.

const updateState = produce((draftState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_SUCCESS':
      draftState.data.push(...action.payload.data);
      draftState.page++;
      draftState.isLoading = false;
      break;
    case 'FETCH_DATA_ERROR':
      draftState.isLoading = false;
      break;
    case 'FETCH_DATA_LOADING':
      draftState.isLoading = true;
      break;
    default:
      break;
  }
});

fetchData 함수를 만듭니다. 데이터를 불러오는 요청을 보내고 상태를 업데이트하는 작업을 수행합니다.

const fetchData = () => {
  if (isLoading) return;

  dispatch({ type: 'FETCH_DATA_LOADING' });

  // 데이터를 불러오는 요청을 보내고 성공시 데이터를 처리하는 로직
  getData()
    .then((response) => {
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data });
    })
    .catch(() => {
      dispatch({ type: 'FETCH_DATA_ERROR' });
    });
};

이제 Immer를 활용하여 무한 스크롤을 구현할 수 있습니다. 상태를 변경할 때마다 새로운 객체를 생성하지 않고도 상태를 간단하게 수정할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다.

#programming #webdevelopment