[React] Zustand 쉽고 강력한 상태관리

안녕하세요! 고영이에요.
오늘 소개해볼 주인공은 Zustand에요! 🙌

Zustand

• Github: pmndrs/zustand

Zustand는 최근에 알게된 전역 상태 관리 라이브러리인데요. 독일어로 상태라는 뜻이에요. 리액트 진영에서 아주 유명한 Redux와 비슷한 녀석이에요.

Redux 단점

저는 프론트엔드 개발을 할때 상태관리를 위해 redux와 redux-saga를 사용하곤 했는데요. 이게 사용하면 할 수록 글로벌 상태관리 라는 핵심에서 벗어나 코드가 점점 지저분해지더라구요...
리덕스 특성상 store를 만들고, action을 만들고, reducer를 만들고, dispatch 하다보면 내가 이걸 왜 쓰고 있지..? 라는 생각이 들더라구요. 리덕스는 작성 패턴이 복잡하고, 여러가지 api를 배워야하는 번거로움이 큰 단점인 것 같아요.

Zustand 장점

리덕스에 점점 지쳐가는 도중에 혜성 같이 나타난 Zustand!!! 이 친구는 글로벌 상태관리를 엄청 쉽게 해결해줘요!

• 아주 쉽게 store를 만들 수 있어요.
• 아주 쉽게 store를 원하는 곳에 가져다 쓸 수 있어요.
• 아주 쉽게 상태를 변경할 수 있어요. 리액트의 setState 사용법과 동일해요.

스토어 생성

아래 코드에서 스토어를 만들고 상태를 추가해요.

// zustand.js
import create from 'zustand'

// 1. create 함수를 사용하여 글로벌 스토어를 만들고 export
export const useMyStore = create((set) => ({
  // 2. 사용하고자 하는 상태를 추가
  num: 0,
  // 3. set 함수를 사용하여 상태 변경 함수 생성
  updateNum: (value) => set({ num: value }),
  // 4. update 함수 이용하여 상태 변경 함수 생성
  increaseNum: () => set((state) => ({ num: state.num + 1 }))
}))

스토어 사용

위에서 만든 스토어를 아래 코드에서 사용해봐요.

// MyComponent.jsx
import { useMyStore } from './zustand'

export default function MyComponent() {
  // 5. useMyStore에 등록한 상태, 함수 가져오기
  const { num, updateNum, increaseNum } = useMyStore()
  
  // 6. 변수, 함수 사용
  return (
    <div>
      <div>num: {num}</div>
      <div>
        <button onClick={() => updateNum(Math.random())}>random 변경</button>
        <button onClick={increaseNum}>num +1 증가</button>
      </div>
    </div>
  )
}

위 예시처럼 간단하게 글로벌 스토어를 생성하고, 함수형 컴포넌트에 가져다가 사용할 수 있어요! 글로벌 스토어가 여러개 필요하면 얼마든지 create()로 만들 수 있어요!

마무리

너무 너무 편리하고 쉬운 Zustand! 여러분들도 많이 사용해주세요!!
그럼 이만~ 👋