• Redux와 기능은 같지만, 표현법이 쉬워짐. 세팅 문법 필요 없음.

설치

npm install zustand

---

컴포넌트들 간에 변수를 공유하고 싶을 때

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

//state 보관함 -> 보통 변수에 담아서 사용(useStore) 
const useStore = create(()=> {
    count : 0,
    증가() {
        set((state)=>({count : state.count +1}))
    }
})

//컴포넌트1
function App() {
    const {count, 증가} = useStore(); //보관함에서 count 변수 뽑아옴 
    return (
        <div className="App">
            <p>구독자 {count}</p>
            <button onClick={()=> 증가(); }}>버튼</button>
        </div>
    );
}

//컴포넌트2
function Card() {
    const {count} = useStore(); //보관함에서 count 변수 뽑아옴 
    return (
        <div className="App">
            <p>카드 {count}</p>
        </div>
    );
}

export default App;

1. state 보관함에 변수 저장 create()- 모든 컴포넌트들이 가져다 쓸 수 있음

    const useStore = create(()=> {
        count : 0, //object형식으로 저장 
    })
   

2. 컴포넌트 내에서 state 보관함 내의 변수 호출

    const {count} = useStore(); //보관함에서 count 변수 뽑아옴
   

   • store를 컴포넌트에 불러오는 방법 2가지

       // #1 select 함수를 사용해 import 하여 사용하기
            const isLogin = useStore((state) => state.isLogin);
       // #2 구조분해 할당을 통해 가져오기 
            const { isLogin } = useStore();
     

3. state 변경 setState

    // 비추. 모든 컴포넌트에서 state 변경을 시도하면 버그 가능성 높아짐 
    <button onClick={()=> {useStore.setState({count : count - 1})}}>버튼</button>
   
    //추천. 처음 변수 세팅할 때 함수도 같이 세팅 
    const useStore = create(()=> {
        count : 0,
        증가() { //함수도 아예 지정
            set((state)=>({count : state.count +1}))
        }
    })
   
    //변수 많아지면 store 분리도 가능 
    const useStore2 = create(()=> {
        count : 0,
        감소() { //함수도 아예 지정
            set((state)=>({count : state.count -1}))
        }
    })
   

4. 디버깅 - 리액트 개발자 도구에서 state 변화 확인 가능

    import { devtools } from "zustand/middleware";
   

---

set함수는 상태를 병합한다.

// store hook 생성
const useStore = create(
    (set) => ({

      isLogin: false, //state
      toggleIsLogin: () => set((state) => ({ isLogin: !state.isLogin })),

    })
);

export default useStore;

boolean type의 객체로 버튼 클릭 시 토글되는지 실험

isLogin state에 false를 담아놨다.
toggleIsLogin state에는 함수를 넣고 set함수를 넣어 isLoginstate 상태를 호출될 때마다 반전시키도록 했다.

ex)
toggleIsLogin -> 호출 되면 -> isLogin : true
toggleIsLogin -> 호출 되면 -> isLogin : false

---

cf) https://youtu.be/zNHZJ_iEMPA?si=hN2Yc5MYnVuoMzAe
cf) https://velog.io/@ho2yahh/react-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-Zustand-%EB%A5%BC-%EC%95%84%EC%8B%AD%EB%8B%88%EA%B9%8C