Zustand (2)

학습 목표

Zustand 라이브러리를 사용하여 전역 상태 관리를 구현하는 방법을 학습합니다. 이전 영상에서 배운 Zustand의 기본 개념을 바탕으로, 실제 애플리케이션에서 상태를 저장하고 관리하는 구체적인 방법론을 익힙니다. 특히, 복잡한 데이터 구조(배열)를 다루고, 상태 변경(추가, 수정, 삭제) 로직을 Zustand 스토어 내에서 효율적으로 구현하는 방법을 이해하는 것을 목표로 합니다.

핵심 개념

• Zustand 스토어 활용: create 함수를 사용하여 Zustand 스토어를 생성하고, useStore 훅을 통해 컴포넌트에서 상태에 접근합니다.
• 상태 초기화: 배열 형태의 데이터를 초기 상태로 설정하는 방법을 배웁니다. 각 ToDo 아이템은 id, title, completed 속성을 가집니다.
• 상태 변경 로직: Zustand 스토어 내에서 set 함수를 사용하여 상태를 업데이트합니다.
  • 추가 (Add): 새로운 ToDo 아이템을 기존 배열에 추가합니다. spread 문법과 새로운 배열 생성을 통해 불변성을 유지합니다.
  • 수정 (Toggle): 특정 ToDo 아이템의 completed 상태를 반전시킵니다. map 함수를 사용하여 배열을 순회하며 해당 아이템만 수정합니다.
  • 삭제 (Delete): 특정 ToDo 아이템을 배열에서 제거합니다. filter 함수를 사용하여 해당 아이템을 제외한 새로운 배열을 생성합니다.
• 불변성 유지: React와 Zustand에서 상태를 변경할 때는 항상 불변성을 유지해야 합니다. 기존 배열이나 객체를 직접 수정하는 대신, 새로운 배열이나 객체를 생성하여 업데이트합니다.
• 컴포넌트와 스토어 연동: 컴포넌트에서 발생하는 이벤트(클릭, 입력 등)를 처리하고, 해당 이벤트에 맞는 스토어의 상태 변경 함수를 호출합니다. id를 이용해 특정 아이템을 식별하고 조작하는 방법을 익힙니다.

// 예시: ToDo 아이템 토글 로직
const toggleTodo = (id) => {
  set((state) => ({
    todos: state.todos.map((todo) =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ),
  }));
};

공부 방향성

이 영상을 시청하기 전에 Zustand의 기본적인 사용법(상태 선언, useStore 훅 사용법)을 숙지하는 것이 좋습니다. 영상을 통해 배운 ToDo 리스트 구현 예제를 바탕으로, 실제 프로젝트에 적용해 보면서 상태 관리 로직을 더욱 깊이 이해할 수 있습니다. 특히, 배열 데이터의 추가, 수정, 삭제 시 불변성을 유지하는 패턴에 집중하여 연습하면 좋습니다. 다음 단계로는 Zustand의 미들웨어 활용이나 다른 상태 관리 라이브러리와의 비교 학습을 통해 전반적인 상태 관리 역량을 강화할 수 있습니다.