Zustand로 모드 전환 로직 최적화

Kanban 보드에서 editMode, deleteMode, errorMode를 버튼(✏️, 🗑️, ⚠️)으로 전환할 때, editMode가 켜진 상태에서 다른 모드를 클릭하면 editMode가 꺼지지 않고 유지되었다. 또한, deleteMode나 errorMode에서 다른 모드로 전환할 때 editMode가 불필요하게 켜지는 현상이 발생했다.

원인 분석

Zustand 스토어의 toggleEditMode, toggleDeleteMode, toggleErrorMode 함수는 개별적으로 상태를 토글하도록 설계되었으나, KanbanHeader의 onClick 핸들러에서 다른 모드를 명시적으로 끄는 로직이 불완전했다. 예를 들어, toggleDeleteMode 호출 시 if (errorMode || editMode) { toggleErrorMode(false); toggleEditMode(false); } 조건이 있지만, 이 로직이 모드 간 상호 배타성을 보장하지 못했다. Zustand 상태 업데이트가 의도대로 반영되지 않은 것도 문제였다.

해결 방법

1. Zustand 로직 수정: 각 toggle 함수에서 선택된 모드를 토글하면서 나머지 모드를 모두 false로 설정하도록 개선.

toggleEditMode: () => set((state) => ({
  editMode: !state.editMode,
  deleteMode: false,
  errorMode: false,
})),
toggleDeleteMode: () => set((state) => ({
  deleteMode: !state.deleteMode,
  editMode: false,
  errorMode: false,
})),
toggleErrorMode: () => set((state) => ({
  errorMode: !state.errorMode,
  editMode: false,
  deleteMode: false,
})),

 

onClick 단순화: KanbanHeader의 버튼 핸들러에서 불필요한 조건문 제거하고, Zustand의 toggle 함수에만 의존.

 

onClick={() => {
  if (editMode) setEditingTodo(null);
  toggleEditMode();
}}

1. 상태 확인: 디버깅 로그 추가 후 모드 전환 시 상태가 올바르게 업데이트되는지 확인.

 

회고

Zustand를 활용해 상태 관리 로직을 다루면서 상호 배타적인 동작(예: editMode, deleteMode, errorMode)을 구현하는 과정에서 중요한 교훈을 얻었다. 특히, 상태 전환 시 발생한 문제를 해결하며, 상태 업데이트를 단일 소스인 Zustand 스토어에 집중시키는 것이 핵심이라는 점을 깊이 깨달았다. 초기에는 각 컴포넌트의 이벤트 핸들러에서 모드 전환 로직을 부분적으로 처리하려 했으나, 이는 중복 코드와 상태 불일치를 초래했다. Zustand의 set 함수를 활용해 모든 모드 상태를 한 곳에서 관리하도록 리팩토링하면서, 로직의 일관성과 예측 가능성이 크게 향상되었다.

 

이 과정에서 컴포넌트와 스토어 간 책임 분리를 명확히 하는 것이 얼마나 중요한지도 체감했다. 컴포넌트는 UI 렌더링과 사용자 입력에 집중하고, 상태 변화는 스토어가 전담하도록 설계하자 코드가 간결해졌을 뿐 아니라 디버깅도 훨씬 쉬워졌다. 예를 들어, KanbanHeader 컴포넌트에서 버튼 클릭 시 Zustand의 toggle 함수만 호출하도록 수정한 후, 더 이상 개별 컴포넌트에서 상태를 직접 조작할 필요가 없어졌다. 이는 로직 중복을 줄이고, 유지보수성을 높이는 데 큰 도움이 됬다.