자바스크립트 Immer를 활용한 온라인 주문 애플리케이션 개발하기

27 Sep 2023

immer

이번 글에서는 자바스크립트의 Immer 라이브러리를 활용하여 온라인 주문 애플리케이션을 개발하는 방법에 대해 알아보겠습니다. Immer는 불변성을 유지하기 위한 코드 작성을 쉽게 도와주는 라이브러리로, 복잡한 어플리케이션의 상태 관리를 간편하게 할 수 있습니다.

Immer란?

Immer는 immer.js라고도 불리며, 불변성을 유지하는 코드를 작성하기 위한 도구입니다. 자바스크립트의 불변성은 상태를 변화시키기 위해 항상 새로운 객체를 생성하는 것인데, 이러한 작업은 코드를 복잡하게 만들 수 있습니다. Immer는 이러한 복잡성을 해결하기 위해, 불변성을 유지하면서도 새로운 상태를 쉽게 업데이트할 수 있는 방법을 제공합니다.

Immer를 활용한 온라인 주문 애플리케이션 개발 예시

아래는 Immer를 활용하여 간단한 온라인 주문 애플리케이션을 개발하는 예시 코드입니다. 이 코드는 상품 목록을 가져오고, 장바구니에 상품을 추가하고 제거하는 기능을 구현합니다.

import produce from 'immer';

// 상품 목록 초기 상태
const initialState = {
  products: [
    { id: 1, name: '상품 1', price: 10000 },
    { id: 2, name: '상품 2', price: 20000 },
    { id: 3, name: '상품 3', price: 30000 },
  ],
  cart: [],
};

// 액션 타입 정의
const ADD_TO_CART = 'ADD_TO_CART';
const REMOVE_FROM_CART = 'REMOVE_FROM_CART';

// 리듀서
const reducer = (state = initialState, action) => {
  return produce(state, (draft) => {
    switch (action.type) {
      case ADD_TO_CART:
        draft.cart.push(action.payload.product);
        break;
      case REMOVE_FROM_CART:
        draft.cart = draft.cart.filter((item) => item.id !== action.payload.productId);
        break;
      default:
        break;
    }
  });
};

// 액션 생성 함수
const addToCart = (product) => ({
  type: ADD_TO_CART,
  payload: { product },
});

const removeFromCart = (productId) => ({
  type: REMOVE_FROM_CART,
  payload: { productId },
});

위 코드에서 produce 함수는 state 객체의 복사본인 draft 객체를 생성하여 이를 수정합니다. 이렇게 하면 기존의 상태 객체를 직접 수정하지 않고도 새로운 상태를 생성하게 되며, 상태의 불변성이 유지됩니다.

결론

Immer를 사용하면 자바스크립트의 불변성을 유지하면서도 쉽게 상태를 업데이트할 수 있습니다. 이를 활용하여 복잡한 어플리케이션의 상태 관리를 간단하게 할 수 있으며, 효율적인 코드 작성을 도와줍니다. 앞으로 Immer를 활용하여 효과적인 온라인 주문 애플리케이션을 개발해보시기 바랍니다.

#Immer #온라인주문애플리케이션