Immer를 사용하여 복합적인 UI 상태 관리하기

27 Sep 2023

reactjs

많은 현대적인 웹 애플리케이션은 복잡한 UI 상태를 관리해야 합니다. 사용자 입력, 네트워크 요청, 애니메이션 등 다양한 요소가 상태를 변경시키기 때문에 효율적인 상태 관리 방법이 필요합니다. 이때 Immer 라이브러리를 사용하면 복잡한 상태를 간단하게 관리할 수 있습니다.

Immer란?

Immer는 JavaScript의 불변 상태를 조작하기 위한 간편한 도구입니다. 기존의 수정 가능한 상태를 변경하는 대신, Immer는 불변 객체를 생성하고 변경 사항을 추적하여 불변성을 유지합니다. 이를 통해 복잡한 상태 변경 작업을 간소화하고 성능을 향상시킬 수 있습니다.

복합적인 상태 관리 예시

다음은 복합적인 UI 상태를 관리하는 예시입니다. 상태는 사용자 정보와 알림 목록을 포함한 객체입니다.

const initialState = {
  user: {
    name: "John Doe",
    email: "johndoe@example.com",
    age: 30,
  },
  notifications: [],
  isLoading: false,
};

// Immer를 사용하여 상태를 변경하는 리듀서 함수
function reducer(state = initialState, action) {
  return produce(state, (draft) => {
    switch (action.type) {
      case "UPDATE_USER":
        draft.user.name = action.payload.name;
        draft.user.email = action.payload.email;
        break;
      case "ADD_NOTIFICATION":
        draft.notifications.push(action.payload);
        break;
      case "SET_LOADING":
        draft.isLoading = action.payload;
        break;
      default:
        break;
    }
  });
}

// 상태 변경 액션을 호출하는 예시
dispatch({ type: "UPDATE_USER", payload: { name: "Jane Smith", email: "janesmith@example.com" } });
dispatch({ type: "ADD_NOTIFICATION", payload: "New notification" });
dispatch({ type: "SET_LOADING", payload: true });

위의 예시에서 Immer를 사용하여 리듀서 함수를 작성하면 복잡한 상태 변경 작업이 간단하게 처리됩니다. produce 함수는 불변성을 유지한 상태 객체를 반환하므로 직접 상태를 수정하거나 새로운 객체를 복사할 필요가 없습니다.

결론

Immer는 복잡한 UI 상태 관리를 간단하게 만들어주는 효율적인 라이브러리입니다. 불변 상태를 유지하면서도 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. Immer를 사용하여 프로젝트의 상태 관리를 개선해보세요!

#React #상태관리