자바스크립트 Immer를 활용한 데이터 시각화 애플리케이션 개발하기

27 Sep 2023

immer

소개

자바스크립트는 데이터 시각화를 위한 여러 라이브러리와 프레임워크를 제공하고 있습니다. 그 중에서 Immer는 데이터를 다루는 작업을 간편하게 만들어주는 라이브러리입니다. Immer는 불변성을 유지하면서도 간편하게 데이터를 수정하고 갱신할 수 있는 기능을 제공합니다. 이번 블로그 포스트에서는 Immer를 활용하여 데이터 시각화 애플리케이션을 개발하는 방법을 알아보겠습니다.

Immer란?

Immer는 데이터 상태 관리를 위해 사용되는 자바스크립트 라이브러리입니다. 주로 상태 업데이트 로직을 작성할 때 사용되며, 가독성이 좋은 코드를 작성하는 데 도움을 줍니다. Immer를 사용하면 불변성을 유지하는 것이 쉬워지며, 복잡한 데이터 구조를 간단하게 다룰 수 있습니다.

Immer의 사용법

Immer의 가장 기본적인 사용법은 produce 함수를 사용하는 것입니다. produce 함수는 첫 번째 인자로 초기 상태를 받고, 두 번째 인자로 업데이트를 수행할 함수를 받습니다. 이 함수 내에서는 불변성을 신경쓰지 않고 직접 상태를 수정할 수 있습니다. Immer는 내부적으로 상태의 변화를 추적하고 필요한 경우에만 실제로 새로운 객체를 생성하여 업데이트합니다.

import produce from 'immer';

const initialState = {
  data: [],
  isLoading: false,
  error: null
};

const reducer = (state, action) => {
  return produce(state, draft => {
    switch (action.type) {
      case 'FETCH_START':
        draft.isLoading = true;
        break;
      case 'FETCH_SUCCESS':
        draft.isLoading = false;
        draft.data = action.payload;
        break;
      case 'FETCH_ERROR':
        draft.isLoading = false;
        draft.error = action.payload;
        break;
      default:
        break;
    }
  });
};

위의 예제 코드에서는 reducer 함수 내에서 Immer의 produce 함수를 사용하여 상태를 업데이트하고 있습니다. draft 객체는 원본 상태를 가변적으로 수정하는 데 사용되며, draft 객체의 수정 작업은 실제로 새로운 객체를 생성하여 변화를 추적합니다.

데이터 시각화 애플리케이션 개발하기

이제 Immer를 활용하여 데이터 시각화 애플리케이션을 개발하는 방법을 알아보겠습니다. 데이터 시각화를 위한 여러 라이브러리와 함께 Immer를 사용하면 애플리케이션의 개발 속도를 크게 향상시킬 수 있습니다.

import produce from 'immer';
import { BarChart, PieChart } from 'chart-lib';
import { fetchData } from 'api';

const initialState = {
  data: [],
  isLoading: false,
  error: null
};

const reducer = (state, action) => {
  return produce(state, draft => {
    switch (action.type) {
      case 'FETCH_START':
        draft.isLoading = true;
        break;
      case 'FETCH_SUCCESS':
        draft.isLoading = false;
        draft.data = action.payload;
        break;
      case 'FETCH_ERROR':
        draft.isLoading = false;
        draft.error = action.payload;
        break;
      default:
        break;
    }
  });
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    dispatch({ type: 'FETCH_START' });

    fetchData()
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_ERROR', payload: error }));
  }, []);

  return (
    <div>
      {state.isLoading && <p>Loading...</p>}

      {!state.error && state.data.length > 0 && (
        <div>
          <BarChart data={state.data} />
          <PieChart data={state.data} />
        </div>
      )}

      {state.error && <p>Error: {state.error}</p>}
    </div>
  );
};

위의 예제 코드에서는 reducer 함수를 사용하여 상태를 관리하고, useReducer 훅을 사용하여 상태와 액션을 연결합니다. useEffect를 통해 데이터를 비동기로 가져와 상태를 업데이트하고, 가져온 데이터를 이용하여 바 차트와 파이 차트를 렌더링합니다.

결론

Immer는 데이터 상태 관리를 간편하게 만들어주는 자바스크립트 라이브러리입니다. Immer를 활용하면 데이터 시각화 애플리케이션의 개발 속도를 향상시킬 수 있으며, 가독성이 좋은 코드를 작성할 수 있습니다. 이번 포스트에서는 Immer의 기본 사용법과 데이터 시각화 애플리케이션을 개발하는 방법을 소개하였습니다.

#Immer #데이터시각화