Zustand로 리액트 상태관리

코딩알려주는 누나 강의를 듣고 쓰는 글입니다.

 

Zutand는 상태관리를 위해 만들어진 라이브러리다.

상태관리가 필요한 이유는 이미 간단히 포스팅 해두었다.

리액트 redux 상태관리

리액트 redux 상태관리

 

근데 확실히 Zustand 쓰는게 편하긴 한듯...

 

Zustand를 사용하는 방법은 아래와 같다.

1. Zustand를 설치한다.

npm install zustand

2. store를 만들자. src > stores > personStore.js 파일을 만들어준다.

3. Store.js에 create를 import해준다. state를 저장해주는 store를 만들어주는 것이 create

import {create} from "zustand"

const personStore = create (() => ({
person: [] //사용하는 state를 써주고 초기화까지 시켜준다.
}));

export default personStore;

4. store에 있는 state를 사용해보자

import personStore from './stores/personStore'

.
.
.

const {person} = personStore();//personStore에 있는 state인 person을 가져옴

5. 함수를 store에 만들어보자. 

import {create} from "zustand"

const personStore = create ((set) => ({//set은 state를 set해주기위해 zustand가 제공해준 함수
  person: [],
  addPerson: (name, age) => set((state) => ({//매개변수가 있으면 (name, age) 같이 매개변수를 넣어주면 된다.
    person: [...state.person, {name: name, age: age}]
  }))
}));

export default personStore;

6. store에 있는 함수를 사용해보자

import personStore from './stores/personStore'

.
.
.

const {addPerson} = personStore();
addPerson('아무개', 20);