Zustand로 상태 관리 해보기
상태 관리
React로 프로젝트를 진행하다 보니 규모가 커짐에 따라 상태들의 관계가 복잡해지고 유지보수가 어려워졌다.
초기에는 컴포넌트의 수도 적고 상태의 수도 적다 보니 흐름을 쉽게 이해할 수 있어서 props로 넘겨주어도 문제가 없었다.
하지만, 프로젝트가 진행됨에 따라 하위 컴포넌트로 상태를 넘겨주는 단계가 많아지게 되는 일이 발생하였다.
상태 관리는 이런 경우에 필요하다.
상태들이 복잡하게 얽혀 있고 상호 간에 의존성이 많아지게 되면, UI가 어떻게 변하는지 알기 어렵기 때문에 잘 관리할 필요가 있다.
상태 관리를 보다 쉽게 할 수 있게 해주는 많은 상태 관리 라이브러리들이 존재하는데, 어떤 상태 관리 라이브러리를 사용할지 고민하다 Zustand를 사용해 보려고 한다.
Zustand
Zustand는 독일어로 상태를 뜻한다.
패키지 크기가 작고 사용법이 단순하고 직관적이라는 장점을 가지고 있다.
state 선언
import { create } from 'zustand';
interface countState {
count: number;
incCount: () => void;
}
const useCountStore = create<countState>((set) => ({
count: 0,
incCount: () => set((state) => ({ count: state.count + 1 })),
}));
export default useCountStore;Zustand로 상태를 선언하는 방법은 위와 같다.
create 함수의 파라미터에 함수 형태로 state의 초기 값과 state를 변경하는 함수를 선언해 주면 된다.
store 불러오기
import useCountStore from '@store/useCountStore';
const Counter = () => {
const { count, incCount } = useCountStore()
return (
<div>
<span>{count}</span>
<button onClick={incCount}>Click!</button>
</div>
)
}이후에는 해당 state를 사용할 컴포넌트에서 store를 import하여 사용해 주면 된다.
이를 통해 부모 컴포넌트에서 자식 컴포넌트로 직접 전달할 필요없이 state를 관리할 수 있게 된다.
후기
이전에 옵저버 패턴을 이용하여 비슷하게 상태를 관리해 보았는데, 더욱 편리하고 간단하게 상태 관리를 하는 방법들을 알게 되어 좋았다.
또한, 기존에 하위 컴포넌트로 state를 내려주다 보면 그 단계가 깊어질 때마다 코드 작성에 어려움을 많이 겪었는데, Zustand로 간단하게 상태 관리를 할 수 있게 되어 굉장히 편해졌다.
아직 완벽하게 사용하지는 못하지만, 동작 방식을 학습하면서 상태를 잘 관리할 수 있도록 해야겠다.