# Zustand 사용 후기

프로젝트를 진행하면서 상태관리 도구를 하나 선정해서 도입하려고 마음먹었다.

선택지에는 `redux-toolkit`, `Recoil`, `Zustand` 가 있었다.

### `zustand`를 선택한 이유는?

이전부터 사용이 간단한 상태관리 도구를 사용해보고 싶다는 생각이 있었기에 `redux`, `redux-toolkit` 은 제외되었다. `Recoil`은 더이상 업데이트를 하지 않고 많은 사람들이 `zustand`를 추천해서 도입하게 되었다.

### Zustand 설치

```bash
npm install zustand
```

### store 생성

create를 통해 store를 생성 해준다.

store는 여러개 생성 할수 있다.

`useStore` 라고 작명해도 되지만 `import`할 때

`zustand`**의** `useStore` **말고 우리가 작성한** `useStore` **를** `import` **를 해야한다.**

```typescript
// store.ts

import { create } from 'zustand'

interface DataStore {
    data: string;
    updateData: (inputData: string) => void;
    deleteData: () => void;
}

const useDataStore = create((set) => ({
  data: '',
  updateData: (inputData) => set({ data: inputData }),
  deleteData: () => set({ data: '' }),
}));

export default useDataStore;
```

❌ 주의 - store 생성 할때

react의 useState와 사용법이 비슷해 보이지만 다르다!

```typescript
// useState의 사용법

const [data, setData] = useState<string>('')
// setData는 아래와 같이 사용하면된다.
setData('Tommy')

// zustand의 사용법
// { data: inputData } 형태로 넣어주어야한다.
updateData: (inputData) => set({ data: inputData }),
deleteData: () => set({ data: '' }),
// 잘못된 사용법
updateData: (inputData) => set(inputData)
```

처음 `setData` 처럼 사용이 가능한 줄 알고 오랜시간 삽질을 했다...

잘못된 사용법으로 작성 시 `updateData`는 `function`이 아니라는 결과가 나온다

### 상태 / 상태 관리 사용

```typescript
import React from "react";
import useDataStore from './store.ts';

function App(){
    const data = useDataStore((state) => state.data);
    const updateData = useDataStore((state) => state.updateData);
    const deleteData = useDataStore((state) => state.deleteData);

    return (
        <div>
            <p>데이터 : {data}</p>
        </div>
    );
}
```

사용하고 싶은 컴포넌트 및 위치에서 `import`해서 사용하면 상태와 액션을 사용 할 수 있다.

> 이전에 공부했던 redux, redux-toolkit 보다는 확실히 구성과 코드가 간단하기에 전역 상태 관리를 편하게 할수있었다. 전역 상태관리를 도입 했으니 전역으로 상태 관리가 필요한 상태와 컴포넌트 상태관리가 필요한 상태를 분류해서 작성 해볼까 한다.