Colin's Blog
Immer를 활용한 대시보드 애플리케이션 만들기

dashboard

Immer는 자바스크립트의 불변성 유지를 도와주는 라이브러리입니다. 이번 포스트에서는 Immer를 활용하여 대시보드 애플리케이션을 만들어보겠습니다.

사용할 기술 스택

대시보드 애플리케이션 구조

대시보드 애플리케이션은 여러 개의 위젯으로 구성되어 있습니다. 각 위젯은 사용자가 선택한 데이터를 보여주고, 필요에 따라 수정할 수 있는 기능을 제공합니다. Immer를 사용하여 애플리케이션의 상태를 관리하면서 불변성을 유지할 수 있습니다.

프로젝트 설정

먼저, React 애플리케이션을 생성합니다.

npx create-react-app dashboard-app

다음으로, 필요한 패키지들을 설치합니다.

cd dashboard-app
npm install redux immer

Redux 설정

Redux를 사용하여 애플리케이션의 상태를 관리합니다. 이때, Immer를 활용하여 불변성을 유지하며 상태를 업데이트할 수 있습니다.

1. 상태 정의

먼저, 애플리케이션의 상태를 정의합니다. 이 예시에서는 대시보드에 표시할 데이터와 선택한 위젯의 정보를 저장할 것입니다.

// src/redux/store.js

import { createStore } from 'redux';

const initialState = {
  data: [],
  selectedWidget: null,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_DATA':
      return {
        ...state,
        data: action.payload,
      };
    case 'SELECT_WIDGET':
      return {
        ...state,
        selectedWidget: action.payload,
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

2. 액션 생성 함수 작성

액션 생성 함수는 액션 객체를 생성하는 함수입니다. 여기서는 데이터를 설정하거나 위젯을 선택하는 액션을 생성하는 함수를 작성합니다.

// src/redux/actions.js

export function setData(data) {
  return { type: 'SET_DATA', payload: data };
}

export function selectWidget(widget) {
  return { type: 'SELECT_WIDGET', payload: widget };
}

3. 컴포넌트와 Redux 연동

애플리케이션의 컴포넌트들을 Redux와 연동하여 상태를 업데이트하고, 필요한 데이터를 가져올 수 있도록 설정합니다.

// src/App.js

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { selectWidget, setData } from './redux/actions';

function App() {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.data);
  const selectedWidget = useSelector((state) => state.selectedWidget);

  // 데이터 설정
  React.useEffect(() => {
    // 데이터를 가져오는 비동기 함수 호출
    // ...

    dispatch(setData(data));
  }, [dispatch]);

  // 위젯 선택
  function handleWidgetClick(widget) {
    dispatch(selectWidget(widget));
  }

  return (
    <div>
      {/* 위젯 컴포넌트들 */}
      {/* ... */}
    </div>
  );
}

export default App;

Immer를 활용한 불변성 유지

애플리케이션의 상태를 Immer를 이용하여 불변성을 유지하며 업데이트할 수 있습니다. Immer를 사용하면 복잡한 불변성 로직을 작성하지 않고도 간편하게 상태를 업데이트할 수 있습니다.

예를 들어, 위젯을 선택할 때 해당 위젯에 대한 정보를 상태에 반영하기 위해 produce 함수를 사용할 수 있습니다.

const newState = produce(currentState, (draft) => {
  draft.selectedWidget = widget;
  // 필요한 상태 업데이트
});

이러한 방식으로 Immer를 활용하여 대시보드 애플리케이션에서 상태를 업데이트할 수 있습니다.

마무리

Immer를 활용하여 불변성을 유지하며 대시보드 애플리케이션을 만들어보았습니다. Immer는 Redux와 함께 사용하면 코드를 더 간결하고 유지보수하기 쉽게 만들어줍니다.

#React #Immer

© 2018 Colin. All rights reserved.