Immer를 이용한 레이아웃 관리 방법 알아보기

27 Sep 2023

immer

이번 포스트에서는 Immer라는 라이브러리를 사용하여 레이아웃 관리 방법을 알아보겠습니다.

Immer란?

Immer는 불변성을 유지하면서 상태를 업데이트하는 데 도움이 되는 JavaScript 라이브러리입니다. 이를 통해 불필요한 복사를 피하고 가독성을 개선할 수 있습니다.

레이아웃 관리하기

레이아웃을 관리하는 것은 웹 개발에서 중요한 부분입니다. 일반적으로 상태를 업데이트할 때 마다 복사를 해야합니다. 하지만 Immer를 사용하면 이 작업을 간단하게 처리할 수 있습니다.

import produce from 'immer';

// 초기 상태 정의
const initialState = {
  layout: {
    width: 800,
    height: 600,
  },
};

// 상태 업데이트 함수
const updateLayout = produce((draft, action) => {
  // action에 따라 상태를 업데이트하는 로직 작성
  switch (action.type) {
    case 'RESIZE':
      draft.layout.width = action.payload.width;
      draft.layout.height = action.payload.height;
      break;
    case 'RESET':
      draft.layout = initialState.layout;
      break;
    default:
      break;
  }
});

// 상태 업데이트 예시
const state = {
  layout: {
    width: 1000,
    height: 800,
  },
};

const action = {
  type: 'RESIZE',
  payload: {
    width: 1200,
    height: 900,
  },
};

const nextState = updateLayout(state, action);
console.log(nextState);

위 예시에서는 produce 함수를 이용하여 updateLayout 함수를 작성했습니다. updateLayout 함수는 기존 상태를 수정하는 로직을 담고 있습니다. 이 함수를 호출하면 불변성을 유지하면서 상태가 업데이트됩니다.

이렇게 Immer를 이용하면 간편하게 불변성을 유지하면서 레이아웃을 관리할 수 있습니다.

마무리

Immer를 사용하면 상태 업데이트 로직을 간단하게 작성할 수 있으며, 불변성을 유지하면서 상태를 업데이트할 수 있습니다. 이를 이용하여 레이아웃을 관리하는 코드를 깔끔하게 작성할 수 있습니다.

#Immer #레이아웃관리