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