이번에 next.js 를 사용하면서 상태관리 라이브러리로는 zustand 를 사용해보기로 하였다.
0. 서론 - recoil 의 문제점
사실 맨처음엔 recoil 을 했는데 next.js 에서 recoil 이 굉장히.. 어려웠다 ㅠㅠ
여기서 너무 막혀서 node 도 다시 설치하고 했는데도 잘 작동하지 않아 힘들었다...
특히 recoil 에게 recoilRoot 를 사용하려고 하면 next js 는 서버와 클라이언트 페이지가 분리되기 때문에
'use client' 문제가 작동하여 얘를 또 따로 페이지로 분리해줘야하고...
여하튼 이런 것들이 너무 복잡했다 ㅠㅠ
1. 왜 Zustand 를 사용하였는가
아무튼 이러한 문제를 빠르게 직시하고 빠르게 상태관리라이브러리를 변경하는 것이 중요했다.
그렇다면 왜 zustand 를 사용했을까!
현재 프로젝트에서 내가 맡고 있는게 굉장히 많았음에도 불구하고 시간이 굉장히 짧게 주어졌다...
아무래도 학교 프로젝트이다 보니 기한 안에 굉장히 많은 것을 해야했기 때문에 최대한 가볍고 심플한 것으로 상태관리를 하고자 했다.
물론 타입스크립트로 언어를 사용하다보니 타입스크립트 지원도 가능해야했고, 함께 프로젝트 진행하는 협업자가
상태관리를 처음 해보았기 때문에 최대한 직관적인것을 고르고자 하였다.
2. 설치하기
npm install zustand
# 또는
yarn add zustand
3. 기본 사용법
3-1. 함수 알아보기
- create : 스토어를 생성하는 함수
create 를 사용하여 상태와 액션을 포함하는 스토어를 만들 수 있다. - set : 상태를 업데이트하는 함수 create 함수 안에서 set 을 통해 상태 정의할 수 있다.
- set은 현재상태를 매개변수로 받아 새로운 상태 객체를 반환하는 콜백함수를 인수로 받는다. 즉 현재 상태를 가져와 업데이트된 상태를 반환한다.
3-2. 스토어 생성
zustand 스토어 : 전역 상태와 상태를 업데이트하는 함수를 포함하는 객체, 컴포넌트 어디서든 접근이 가능함
import { create } from 'zustand';
import { create } from 'zustand';
interface CounterStore {
count: number;
increase: () => void;
decrease: () => void;
}
const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increase: () => set((state) => ({ count: state.count + 1 })),
decrease: () => set((state) => ({ count: state.count - 1 })),
}));
export default useCounterStore;
- count: count는 CounterStore 스토어에서 관리하는 상태. 초기값은 0으로 설정되어 있다.
- increase: increase는 set을 사용하여 count 값을 1 증가시키는 함수
- decrease: decrease는 set을 사용하여 count 값을 1 감소시키는 함수
//컴포넌트에서 사용해보자!
import React from 'react';
import useCounterStore from './path/to/useCounterStore';
function Counter() {
const count = useCounterStore((state) => state.count);
const increase = useCounterStore((state) => state.increase);
const decrease = useCounterStore((state) => state.decrease);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increase}>Increase</button>
<button onClick={decrease}>Decrease</button>
</div>
);
}
위 코드에서 useCounterStore 훅을 사용해
count 상태와 increase, decrease 함수를 가져와, 컴포넌트에서 상태를 표시하고 업데이트할 수 있다.