[Zustand] 간단한 상태 관리, React에서 Zustand 사용하는 방법

 

간단한 상태 관리, React에서 Zustand 사용하는 방법

Redux에서 벗어나 봅시다

 

---

 

Zustand 도입 계기

 

 프로젝트를 개발하다 보면 전역 상태 관리는 거의 필수이다. 컴포넌트에서 컴포넌트로 변수를 넘겨줄 일이 많은데, 그 많은 변수들을 전부 props로 넘겨줄 수는 없기 때문이다. 따라서 전역 상태 관리 라이브러리를 도입할 수 밖에 없고, 그중에서도 가장 대표적인 툴은 아마 Redux일 것이다.

 

 나 또한 Redux를 사용했다. 정확히 말하면 Redux Toolkit을 사용했다. 이미 많은 사람들이 사용하는 툴이고, 그래서 정보도 많고, 공부할 때 참고할 자료도 많았다. 그래서 너무 당연하게도 나에게 상태 관리란 곧 Redux Toolkit이었다.

 

 하지만 점점 문제를 느꼈다. 뭐가 문제나면... 너무 코드가 많다. 변수를 하나만 관리하려고 해도 작성해줘야 하는 코드가 너무 많...다😅 store 생성하고 slice 생성하고 dispatch 생성하고 selector 불러오고 타입도 불러오고... 코드가 무거워지는 것이 느껴져서 결국에는 다른 상태 관리 툴을 찾아보게 되었다.

 

 정말 다양한 상태 관리 툴이 있지만, 나는 그중에서도 Zustand를 사용해보았다. Redux Toolkit 사용자 입장에서 봤을 때, Zustand의 상태 관리 로직이 가장 익숙하게 다가왔기 때문이다. 그럼, 직접 사용해보자 😆

 

 

Zustand 사용법

 

방법을 간단히 정리하자면 다음과 같다.

 

1. store를 생성한다.

2. store에서 전역 변수를 생성하고, 변수 업데이트 함수를 만들고, 타입을 지정한다.

3. 다른 컴포넌트에서 이용한다.

 

 Redux Toolkit과 다른 점이 있다면, 변수와 변수를 업데이트하는 함수(Redux Toolkit에서의 dispatch)를 따로 선언할 필요 없이 한 번에 같이 가져올 수 있다는 점이다.

 

// store/userStore.ts
// Store 이름은 자유롭게 선언하면 됨

import { create } from "zustand";

// 타입 지정

interface UserStore {
  username: string;
  changeUsername: (input: string) => void;
}

// 초기값 지정

const useUserStore = create<USerStore>()((set) => ({
  username: "",
  changeUsername: (input) =>
    set((state) => ({
      username: input,
    })),
}));

export default useUserStore;

 

 

store에서 생성된 변수와 함수는 다음과 같이 이용할 수 있다.

 

// App.tsx

import useUserStore from "../store/userStore";

// 코드 생략

const { username, changeUsername } = useUserStore();

useEffect(() => {
  changeUsername("my name");
}, []);

 

username은 변수, changeUsername는 함수의 형태로 바로 사용하면 된다. 확실히 코드가 간결해졌다.

 

---

 

 이제까지 내가 Redux Toolkit을 사용했던 이유는 그냥 익숙해서였다. 하지만 익숙하다고 해서 하나의 기술에만 갇히지 말고 이것저것 사용해보며 코드를 바꿔나가는 것의 중요성을 다시금 체감하게 되었다. 그러니 Zustand 이외의 다른 상태관리 툴도 사용해봐야겠다😎