zustand

zustand : 전역 상태 관리 
1. 개념 ==> 상태를 의미  - React에서 사용되는 전역 상태 관리 라이브러리 중 하나 

2. 장점 : 간결성  구독 최적화, 유연성, 접근성 

• 3. zustand의 형태(ts기준)
• create 함수를 사용하여 store(스토어)생성 
• 해당 스토어를 통해 프로젝트 전역에서 데이터 접근 가능 
• create 함수에 제네릭<>을 사용하여 함수 구조를 정의 
• 전역 상태값(필드), 전역 상태 설정 함수 
• store을 사용하는 이유: props drilling을 막기 위해서 
• props drilling: React 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어

 

 -creat 함수 내의 구조 

: set 함수를 통해 상태를 업데이트 

 (set) => ({해당 구조 내에서 제네릭 구조를 작성})

 

 

설치 코드 

리액트에서 zustand 설치 하는 코드 
npm i zustand

스토어 대한 구조 사진  -글이 봐도 잘 모르겠으면 한번 그려서 보세요 

 

스토어에 대한 코드

import { create } from "zustand";

// interface  스토어(전역 저장소)의 interface 정의  
interface CountStoreType{
  //상태 필드 정의 
  count: number; 
  //상태 업데이트 함수 
  increment: () => void;
  decrement: () => void;

}
 // 저장소 생성 함수 : create<저장소 구조 interface>();
 // 객체다 
 const useCountStore = create<CountStoreType>((set) => ({
  //상태 필드 초기화 
  count:0,
  increment: () => set((state) => ({
    count : state.count+1
  })),
  decrement: () => set((state) => ({
    count: state.count-1
  }))

})); 

export default useCountStore;

increment : () => -함수를 정의 이 함수를 호출될 때 상태 변경 

 

set((state) => ({...}))  -set 함수를 이용해서 상태 변경 

 

count : state.count+1:  현재 상태의 count 값에 +1 더해 상태 업데이트 

 

export default useCountStore:  저장소를 보내기라고 생각해 주시면  됨

 

 

 

 

import useCountStore from '../stores/count.store';
import useCartStoreType from '../stores/cart.store';



export default function E_zustand() {
  // state 
  //state : count  값에 대한 전역 상태 관리 //
  //객체가 반환  -  구존 분해 할당(우황에서 좌항으로)
  const{count, increment, decrement} =  useCountStore();
  const {items, addItem, removeItem, clearCart} =useCartStoreType();
  //return: zustand 전역 상태 관리에 대한 출력 
  return (
    <div style={{
      textAlign: "center",
      marginTop:"20px"
    }}>
      <h2>Zustand: Counter Example</h2>
      <p>{`Count: ${count}`}</p>

      <h2>Zustand : Cart Example</h2>
      <ul>
        { //타입 추론tS의 기능 
          items.map((item)=> (
            <li key={item.id} style={{marginBottom:'10px'}}>
                {item.name} -${item.price} X {item.quantity}
              <button onClick={() => removeItem(item.id)}
                style={{marginLeft:"10px", padding:"3px 5px"}}>
                삭제
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

구조 분해 할당  -> 우에서 좌항으로 

 

 

 

https://www.heropy.dev/p/n74Tgc

Zustand 핵심 정리