Immer를 활용한 무한 로딩 기능 구현 방법 알아보기

27 Sep 2023

immer

이번 포스트에서는 Immer 라이브러리를 사용하여 무한 로딩 기능을 구현하는 방법에 대해 알아보겠습니다.

Immer란?

Immer는 불변성을 유지하는 상태 관리를 도와주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 간단하게 불변성을 유지하면서 상태를 수정할 수 있습니다. 이를 통해 복잡한 상태 관리 로직을 간단하게 처리할 수 있습니다.

무한 로딩 기능 구현하기

무한 로딩 기능은 보통 사용자가 스크롤을 내릴 때 추가적인 데이터를 로드하는 기능입니다. 이를 구현하기 위해서는 먼저 상태 관리를 할 필요가 있습니다. Immer를 사용하면 간단하게 상태를 관리할 수 있습니다.

import produce from 'immer';

const initialState = {
  data: [],
  loading: false,
};

const reducer = produce((state, action) => {
  switch (action.type) {
    case 'LOADING_START':
      state.loading = true;
      break;
    case 'LOADING_END':
      state.loading = false;
      state.data = action.payload;
      break;
    default:
      break;
  }
}, initialState);

위 코드에서는 initialState 객체를 생성하고, reducer 함수를 produce 함수로 감싸 상태를 수정합니다. LOADING_START 액션에서는 loading 상태를 true로 변경하고, LOADING_END 액션에서는 loading 상태를 false로 변경하고 추가적인 데이터를 data에 할당합니다.

이제 이 상태를 컴포넌트에서 사용하여 무한 로딩 기능을 구현할 수 있습니다.

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

const App = () => {
  const dispatch = useDispatch();
  const { data, loading } = useSelector(state => state);

  const loadMoreData = () => {
    // 데이터를 로드하는 비동기 함수 호출
    // 예를 들어, API 호출 등
    dispatch(setLoading());
    fetchData().then(response => {
      dispatch(setLoadedData(response.data));
    });
  };

  useEffect(() => {
    loadMoreData();
  }, []);

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      {loading && <div>로딩 중...</div>}
      {!loading && (
        <button onClick={loadMoreData}>더 보기</button>
      )}
    </div>
  );
};

위 코드에서는 useSelector 훅을 사용하여 상태를 가져옵니다. useDispatch 훅을 사용하여 액션을 디스패치합니다. loadMoreData 함수에서는 비동기적으로 데이터를 로드하고, setLoading 액션과 setLoadedData 액션을 디스패치하여 상태를 수정합니다.

결론적으로, Immer를 활용하여 무한 로딩 기능을 구현하는 방법을 알아보았습니다. Immer를 사용하면 복잡한 상태 관리 로직을 간편하게 처리할 수 있으므로, 프로젝트에서 활용해 보시기 바랍니다.

잘못된 내용이 있다면 지적해주십시오. 감사합니다!

#Immer #무한로딩