LIME

공부하고 기록하는 블로그

1 분 소요

✔️ zustand?

오늘은 리액트 상태관리 라이브러리 중 하나인 zustand를 알아보고자 합니다. 오늘 알아볼 zustand는 직장동료분께서 요즘 많이들 사용하는 라이브러리 중 하나이고 사용하기도 쉽다고 알려주셨는데요. 독일어로 zustand가 상태라고 하더라고요. 과연 zustand는 기존에 사용하던 redux와 비교하여 어떤 차이가 있을지, 사용 방법은 어떤지 알아보도록 하겠습니다.

✔️ zustand의 장점

일단 zustand는 코드가 간결합니다. redux를 많이들 기피하는 이유 중 하나가 바로 보일러플레이트 코드가 존재한다는 것인데요. 사실 그러한 단점을 보완하기 위해서 Redux Toolkit이 등장하였지만 보일러플레이트가 존재한다는 점은 여전히 변함이 없는데요. zustand는 보일러플레이트가 거의 없다고 봐도 무방할 정도로 코드가 간결합니다.

✔️ zustand 사용법

설치하기

1

npm install zustand

store 생성하기

1
2
3
4
5
6
7
8
9
10
11
12

// store.js

import create from "zustand";

// create를 이용하여 zustand 불러옴과 동시에 상태와 상태를 변경하는 액션 정의
const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useStore;

초기값은 bears로 선언, 그 값을 조작하는 increasePopulation(bears를 1씩 증가)과 removeAllBears(bears를 0으로 리셋)를 선언, 구독할 리스너는 set을 활용하여 관리.

생성한 store 불러와 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// App.js

import useStore from "../store.js";

const App = () => {
  const { bears, increasePopulation, removeAllBears } = useStore(
    (state) => state
  );

  return (
    <>
      <h1>{bears} around here ...</h1>
      <button onClick={increasePopulation}>one up</button>
      <button onClick={removeAllBears}>remove all</button>
    </>
  );
};

생성한 store를 불러와서 간단하게 사용하면 끝입니다 👍 Zustand는 Middleware로 Devtools를 지원하고 있어서 Redux Devtools을 쉽게 연결하여 사용할 수 있기도 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// store.js

import create from "zustand";
import { devtools } from "zustand/middleware"; // ✔️

const store = (set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
});

const useStore = create(devtools(store)); // ✔️

export default useStore;

위와 같이 store를 생성하면 개발자 도구에서 store의 상태 확인이 가능합니다. Redux DevTools는 아래 크롬 웹스토어 링크에서 설치할 수 있습니다.

✔️ 참고 사이트

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)

댓글남기기

참고