# [React] Redux 대신 Zustand!

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

설치

`npm install zustand`

---

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

```javascript
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()`\- 모든 컴포넌트들이 가져다 쓸 수 있음
    
    ```javascript
    const useStore = create(()=> {
        count : 0, //object형식으로 저장 
    })
    ```
    
2. 컴포넌트 내에서 state 보관함 내의 변수 호출
    
    ```javascript
    const {count} = useStore(); //보관함에서 count 변수 뽑아옴
    ```
    
    * store를 컴포넌트에 불러오는 방법 2가지
        
        ```javascript
        // #1 select 함수를 사용해 import 하여 사용하기
             const isLogin = useStore((state) => state.isLogin);
        // #2 구조분해 할당을 통해 가져오기 
             const { isLogin } = useStore();
        ```
        
3. state 변경 `setState`
    
    ```javascript
    // 비추. 모든 컴포넌트에서 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 변화 확인 가능
    
    ```javascript
    import { devtools } from "zustand/middleware";
    ```
    

---

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

```javascript
// 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`함수를 넣어 `isLogin`state 상태를 호출될 때마다 반전시키도록 했다.

ex)  
`toggleIsLogin` -&gt; 호출 되면 -&gt; `isLogin` : true  
`toggleIsLogin` -&gt; 호출 되면 -&gt; `isLogin` : false

---

cf) [https://youtu.be/zNHZJ\_iEMPA?si=hN2Yc5MYnVuoMzAe](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](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)