Zustand의 주요 기능과 유틸리티에 대해 알아보기

1. create : 상태 저장소를 만드는 도구
2. shallow : 리렌더링을 줄이는 도구
3. devtools : 상태 변화 시각적으로 보기
4. persist : 상태를 로컬 스토리지에 저장하기
5. subscribe : 상태 변화 감지하기
6. getState, setState : 상태를 직접 조작하기

1. create : 상태 저장소를 만드는 도구

• Zustand에서 모든 것이 시작되는 핵심 기능
• create를 사용해서 상태 저장소(store)를 만든다.
• 이 저장소는 React 컴포넌트에서 쓸 수 있는 훅(useStore)을 만들어 주고, 이 훅을 통해 상태를 읽거나 업데이트할 수 있다.
• 언제 사용 ?
  • 상태를 중앙에서 관리하려고 할 때
  • React 컴포넌트 간에 데이터를 공유하려고 할 때

---

ex) 카운터 만들기

import { create } from 'zustand';

// Zustand 상태 저장소 만들기
const useStore = create((set) => ({
  // 상태 값 : 초기 상태
  count: 0,
  // 상태 업데이트 함수
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })), 
}));

// 컴포넌트에서 사용하기
const Counter = () => {
	// 상태 가져오기
  const { count, increment, decrement } = useStore(); 
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

• 코드 설명
  • create 안에서 상태(count: 0)와 상태를 바꾸는 함수(increment)를 정의한다.
  • useStore()를 컴포넌트에서 호출해서 상태와 함수를 가져올 수 있다.
• 왜 사용 ?
  • 모든 컴포넌트가 동일한 상태를 손쉽게 읽고 수정할 수 있다.
  • 코드가 간결하고 관리하기 쉽다.

---

2. shallow : 리렌더링을 줄이는 도구(상태를 효율적으로 가져오기)

• shallow는 객체 내부의 값이 바뀌었는지 얕은 비교(값만 확인)로 판단한다.
• 언제 사용 ?
  • 객체 상태에서 특정 값이 바뀌었을 때만 컴포넌트를 리렌더링하고 싶을 때
  • 성능 최적화를 위해 불필요한 리렌더링을 줄이고 싶을 때

---

ex) 사용자 정보

import shallow from 'zustand/shallow';

const useStore = create((set) => ({
  user: { name: 'Alice', age: 25 }, // 상태는 객체로 저장
}));

const UserInfo = () => {
  // shallow를 사용해 name과 age를 가져오지만 얕은 비교로 최적화
  const { name, age } = useStore((state) => state.user, shallow);
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

• 왜 사용 ?
  • React는 기본적으로 상태가 바뀌면 컴포넌트를 다시 그린다.
  • shallow를 사용하면 객체의 내부 값이 실제로 변경되지 않았을 때는 리렌더링을 막아준다.

---

3. devtools : 상태 변화 시각적으로 보기

• Redux DevTools를 사용할 수 있게 도와준다.
  • Redux DevTools : Redux 상태 관리 라이브러리를 디버깅할 때 사용하는 강력한 개발자 도구
  • Redux에서만 사용 X, Zustand 같은 다른 상태 관리 라이브러리에서도 지원
  • 상태가 어떻게 바뀌는지 브라우저에서 확인할 수 있다.
• 언제 사용 ?
  • 상태가 어떻게 변하는지, 이전 상태와 현재 상태를 시각적으로 확인하려고 할 때
  • 디버깅을 쉽게 하고 싶을 때

---

ex) Redux DevTools 연결

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(devtools((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
})));

• Redux DevTools에서 확인할 수 있는 것들
  1. 액션(Action) : 어떤 함수(increment나 decrement)가 호출되었는지 확인
  2. 상태(State) : 상태가 어떻게 변했는지 이전 상태와 현재 상태를 비교
  3. 시간 여행 디버깅 : 상태를 이전 단계로 되돌리거나 다시 실행
• 왜 사용 ?
  • 상태 변경 과정을 한눈에 볼 수 있어 디버깅이 쉬워진다.
  • 복잡한 상태 관리 로직을 확인하고 수정하기 용이하다.

---

4. persist : 상태를 로컬 스토리지에 저장하기

• 상태를 브라우저의 로컬 스토리지에 저장해 준다.
• 언제 사용 ?
  • 새로고침 후에도 상태를 유지하고 싶을 때
  • 상태를 영구적으로 저장해야 할 때

---

ex) 로컬 스토리지에 저장하기

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'counter-storage', // 로컬 스토리지 키 이름
    }
  )
);

• 코드 설명
  • 상태가 로컬 스토리지에 저장되고, 페이지를 새로고침해도 값을 복원할 수 있다.
• 왜 사용 ?
  • 사용자 경험을 향상시키기 위해 새로고침 후에도 상태를 유지할 수 있다.
  • ex) 로그인 상태, 사용자 설정, 저장된 데이터 등

---

5. subscribe : 상태 변화 감지하기

• 상태가 바뀔 때 특정 작업(로그 출력 등)을 자동으로 실행한다.
• 언제 사용 ?
  • 상태 변화에 따라 알림, 로깅, API 호출 등을 실행해야 할 때

---

ex) 상태 변경 로그 출력

const unsubscribe = useStore.subscribe(
  (state) => state.count, // 어떤 상태를 구독할지
  (count) => console.log('Count changed:', count) // 상태가 바뀔 때 실행
);

// 구독 해제
unsubscribe();

• 코드 설명
  • 특정 상태가 바뀌었을 때 자동으로 반응하는 기능을 구현할 수 있다.
• 왜 사용 ?
  • 상태 변경 시 자동으로 반응할 수 있어 편리
  • 로그 출력, 애널리틱스 추적 등 다양한 작업에 활용 가능

---

6. getState와 setState : 상태를 직접 조작하기

• 저장소 바깥에서 상태를 직접 읽거나 수정할 수 있다.
• 언제 사용 ?
  • React 컴포넌트 외부(ex 이벤트 핸들러, 외부 모듈)에서 상태를 다뤄야 할 때

---

ex) 상태 직접 가져오기 및 수정

const store = useStore;

// 상태 읽기
console.log(store.getState().count);

// 상태 수정
store.setState({ count: 42 });

• 코드 설명
  • React 컴포넌트가 아니라 다른 곳에서 상태를 다루고 싶을 때 유용
• 왜 사용 ?
  • React와 독립적인 작업을 수행할 때 유용
  • ex) 초기 데이터 설정, 외부 이벤트 기반 상태 변경 등