Zustand 사용 방법
Zustand 사용 방법에 대해 설명하는 페이지입니다.
Tags
TypeScript, React, Next.js, Zustand
Environment
Zustand v5.0.1
1. 개요
이번 글에서는 상태 관리 라이브러리 중 하나인 Zustand 사용 방법에 대해 설명하겠습니다.
2. Zustand란?
Zustand는 간단하고 경량화된 상태 관리 라이브러리로, 작은 패키지 용량과 쉬운 설정 및 직관적인 사용법이 특징인 라이브러리입니다.
Zustand를 사용하면 리액트(React)의 전역 상태 관리를 쉽게 할 수 있습니다.
또한 리액트 컴포넌트에서 의존성 기반으로 필요한 상태만을 구독하여 성능 최적화를 돕습니다. 이와 같은 특징 덕분에 현재 인기를 끌고 있는 상태 관리 라이브러리입니다.
3. Zustand의 주요 특징
Zustand의 주요 특징은 다음과 같습니다.
경량성
최소한의 설정으로 전역 상태 관리가 가능합니다.쉬운 사용법
Redux처럼 복잡한 보일러플레이트 코드가 거의 없으며, Zustand를 사용하기 위해 작성해야하는 코드 줄 수가 적습니다.부분 상태 구독
필요할 때 특정 상태만 구독함으로써 불필요한 리렌더링을 방지합니다.미들웨어 지원
Redux DevTools나 로그 미들웨어 등의 추가 기능을 지원합니다.Flux 패턴
Zustand는 flux 패턴을 따르는 상태 관리 라이브러리로, 여러 개의 스토어(Store)를 만들 수 있습니다. 또한 상태값을 스토어에서 관리하기 때문에 필요한 컴포넌트에서만 가져와 사용할 수 있습니다.
4. Step 1 - Zustand 설치하기
다음 명령어를 입력하여 Zustand를 설치합니다.
1npm install zustand5. Step 2 - 상태 인터페이스 정의하기
먼저 다음과 같이 상태 인터페이스를 정의합니다.
1interface EditorState {
2 title: string;
3 content: string;
4}위의 인터페이스는 Editor라는 스토어의 상태 타입을 정의하는 인터페이스입니다. 해당 스토어는 상태값으로 title이라는 변수와 content라는 변수를 갖습니다.
6. Step 3 - 액션 인터페이스 정의하기
상태 인터페이스를 정의한 후, 다음과 같이 액션 인터페이스를 정의합니다.
1interface EditorAction {
2 initialize: () => void;
3 setEditorState: (data: Partial<EditorState>) => void;
4}위의 인터페이스는 상태값을 초기화하는 initialize라는 메서드와 상태값을 변경하는 setEditorState라는 메서드를 정의합니다.
setEditorState 메서드는 타입스크립트의 유틸리티 타입 중 하나인
Partial을 활용하여 상태 인터페이스에서 정의한 상태 중 일부만 선택하여 업데이트할 수 있는 메서드입니다.
7. Step 4 - 초기 상태 정의하기
다음과 같이 상태 인터페이스에서 정의한 상태값들의 초기값을 지정합니다.
1const initialState: EditorState = {
2 title: "",
3 content: "",
4};8. Step 5 - 스토어(Store) 생성하기
위에서 정의한 상태 인터페이스와 액션 인터페이스로 스토어(Store)를 생성합니다.
1type EditorStoreType = EditorState & EditorAction;
2
3const editorStore: StateCreator<EditorStoreType> = (set) => ({
4 ...initialState,
5 initialize: () => set({ ...initialState }),
6 setEditorState: (data: Partial<EditorState>) => set(() => ({ ...data })),
7});
8
9export const useEditorStore = create<EditorStoreType>(
10 process.env.NODE_ENV === "development"
11 ? (devtools(editorStore) as StateCreator<EditorStoreType>)
12 : editorStore,
13);위의 코드에서 EditorStoreType은 스토어의 타입을 정의하는 부분입니다.
또한 create 함수는 스토어를 생성하는 함수로, 위의 코드에서는 개발 환경일 때 devtools라는 미들웨어를 사용하도록 구현되었습니다.
9. Step 6 - 컴포넌트에서 구독하기
Zustand의 강력한 기능 중 하나는 특정 상태만 구독할 수 있다는 점입니다. 다음과 같이 스토어에서 title 상태만 구독할 수도 있습니다.
1const Editor = () => {
2 const title = useEditorStore((state) => state.title);
3
4 // 아래와 같이 title 상태만 구독할 수도 있습니다.
5
6 // 방법 1.
7 // const { title } = useEditorStore();
8
9 // 방법 2.
10 // const editorStore = useEditorStore();
11 // const title = editorStore.title;
12
13 return <h1>{title}</h1>;
14};
15
16export default Editor;10. 전체 코드
전체 코드는 다음과 같습니다.
1import { StateCreator, create } from "zustand";
2import { devtools } from "zustand/middleware";
3
4interface EditorState {
5 title: string;
6 content: string;
7}
8
9interface EditorAction {
10 initialize: () => void;
11 setEditorState: (data: Partial<EditorState>) => void;
12}
13
14const initialState: EditorState = {
15 title: "",
16 content: "",
17};
18
19type EditorStoreType = EditorState & EditorAction;
20
21const editorStore: StateCreator<EditorStoreType> = (set) => ({
22 ...initialState,
23 initialize: () => set({ ...initialState }),
24 setEditorState: (data: Partial<EditorState>) => set(() => ({ ...data })),
25});
26
27export const useEditorStore = create<EditorStoreType>(
28 process.env.NODE_ENV === "development"
29 ? (devtools(editorStore) as StateCreator<EditorStoreType>)
30 : editorStore,
31);