상태관리로 Recoil을 간단히 다루어 보았는데 이번에는 Zustand! 의 차례이다.
npm trends 기준으로 현재 Recoil의 3~4배 정도의 다운로드 수를 보이고 있을 정도로 인기가 있는 상태관리 라이브러리이다.
그렇다면 스무스하게 zustand를 훑어보자.
zustand 홈페이지 : https://zustand-demo.pmnd.rs/
Zustand
다른 js로 이루어진 프레임워크에서 동작하지만 주로 React에서 동작하는 것을 주 타겟으로 만들어진 상태관리 라이브러리이다.
리덕스 처럼 액션/리듀서/미들웨어 등의 설정이 필요 없이 상태 액션을 바로 설정해 주면 된다.
또 Recoild에 비해 공식 홈페이지에서 SSR기반에서의 개발을 공식적으로 서포트해주고 있다는 점에서 매력적이다.
Zustand 설치
$ npm install zustand
or
$ yarn add zustand
Zustand 사용법
위치는 자유지만, 상태관리용 폴더를 따로 만들어서 zustand 코드를 작성해보자.
(코드는 공식 홈페이지에 있다)
나의 경우 (root)/src/store 라는 폴더안에 simple.ts 라는 파일을 만들어서 작성했다.
목적이 확실하다면 해당 목적이 드러나는 파일 명으로 해도되지 않을까 싶다. ex filter.ts / user.ts / ....
create 함수를 이용해서 원하는 상태와 액션을 추가해줄 수 있다. set 함수는 상태를 추가 or 수정해주는 기능을 한다.
import { create } from 'zustand'
const useStore = create((set) => ({
bears: 0, // 초기값 설정
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), // 값 + 1
removeAllBears: () => set({ bears: 0 }), // 0으로 값 수정
updateBears: (newBears) => set({ bears: newBears }), // 해당 값으로 변경
}))
그리고 나서 위에 bears, increasePopulation 등의 값과 함수를 바로 페이지에서 불러서 사용하면 된다!
그러면 원하는 곳에서 바로 상태와 함수를 사용할 수 있다.
function BearCounter() {
const bears = useStore((state) => state.bears) // bears 값 호출
return <h1>{bears} around here...</h1>
}
function Controls() {
const increasePopulation = useStore((state) => state.increasePopulation) // 증가시키는 액션함수 호출
return <button onClick={increasePopulation}>one up</button>
}
function Controls() {
const { bears, increasePopulation } = useStore() // 이런식으로 한번에 여러개를 호출할 수도 있다.
return <button onClick={increasePopulation}>one up</button>
}
이정도가 간단한 세팅과 사용법이 되겠다.
앞으로 천천히 더 다가가 보도록 해보자
'Front-end' 카테고리의 다른 글
| [상태관리] zustand와 함께하는 상태관리 3, 페이지 새로고침에서 상태 유지하기 (0) | 2024.08.27 |
|---|---|
| [상태관리] zustand와 함께하는 상태관리 2, Immer로 큰 상태의 객체 관리하기 (0) | 2024.08.22 |
| [json-server] json 파일 하나로 백엔드 처럼 쓰기 (0) | 2024.08.09 |
| [Dayjs] 특정 위치의 날짜 지정하기 (타임존 사용하기) (74) | 2024.08.06 |
| node-sass, sass가 뭐야?... Node Sass does not yet support your current environment: OS X Unsupported architecture (0) | 2024.07.17 |
