zustand 사용하기 2

zustand 설치 및 기본 사용법

yarn add zustand

 

 

상태 정의

// src/zustand/bearsStore.js
import { create } from "zustand";

// Zustand 스토어 생성
const useBearsStore = create((set) => ({
  bears: 0, // 초기 상태 값: 곰의 수는 처음에 0으로 시작
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), // 곰의 수를 1 증가시키는 함수
  removeAllBears: () => set({ bears: 0 }), // 곰의 수를 0으로 초기화하는 함수
}));

export default useBearsStore; // 생성한 Zustand 스토어를 다른 파일에서 사용할 수 있도록 내보냄

create -> 스토어 생성

set -> 스토어 상태 업데이

 

 

상태 사용

// src/App.jsx
import "./App.css"; // 스타일 파일을 가져옵니다
import useBearsStore from "./zustand/bearsStore"; // 상태 정의한 파일에서 Zustand 스토어를 가져옵니다

function App() {
  // Zustand 스토어에서 상태와 상태를 변경하는 함수를 가져옵니다.
  const bears = useBearsStore((state) => state.bears); // bears 상태를 구독
  const increasePopulation = useBearsStore((state) => state.increasePopulation); // increasePopulation 함수를 구독

  return (
    <div>
      <h1>{bears} around here ...</h1> {/* 현재 곰의 수를 출력 */}
      <button onClick={increasePopulation}>one up</button> {/* 버튼을 클릭하면 곰의 수를 1 증가 */}
    </

 

 

immer

= 자바스크립트에서 상태를 쉽게 변경할 수 있도록 도와주는 라이브러리

주로 상태 관리 라이브러리와 함께 쓰이며,

불변성을 유지하면서 상태를 변경할 수 있게 해줌

 

왜 사용하는지?

= 자바스크립트에서는 객체나 배열을 변경할 때 불변성을 유지하는 것이 중요함

그래서 immer는 이러한 불변성을 유지하면서도 직관적인 방법으로 상태를 변경할 수 있도록 도와줌

 

주요 특징

1. 불변성 유지

2. 간단한 문법

3. 코드 가독성

 

설치 방법 (임포트도 해줘야 함)

yarn add immer

 

차이

1. Immer를 사용하지 않은 코드:
   • 상태 업데이트 시 배열을 복사하거나 객체를 복사하여 불변성을 유지합니다.
   • todos: [...state.todos, { id: Date.now(), text, done: false }]
   • todos: state.todos.map((todo) => todo.id === id ? { ...todo, done: !todo.done } : todo)
2. Immer를 사용한 코드:
   • 상태 업데이트 시 불변성을 자동으로 처리합니다.
   • state.todos.push({ id: Date.now(), text, done: false })
   • const todo = state.todos.find((todo) => todo.id === id); if (todo) { todo.done = !todo.done }