Zustand - Redux, 간단하게 써보세요!

"상태 관리" 하면 어떤 툴이 떠오르시나요?
Redux? MobX? 아니면 리액트의 Context API?

모두 각각의 장단점을 가졌지만, 아무래도 많은 분들이 Redux로 입문하고, Redux를 많이 활용하실 거라고 생각합니다.

Redux의 설계는 멋지지만, 아무래도 불편한건 기능을 수행하도록 만들기 위해 많은 코드를 작성해야 한다는 점입니다.

여러 컴포넌트가 관리되는 상태와 복잡하고 밀접하게 관계를 맺고 있는 경우가 아닌 그저 단순히 숫자 카운트를 올리고 내리는 상태를 관리해야 한다면? 이런 수고로움이 번거로울 수 있습니다.

이런 단순한 문제들을 보다 간결하게 해결할 순 없을까요?

그런 분들을 위해 Zustand를 소개합니다.

코드부터 봐주세요!

import create from 'zustand'

const [useStore] = create(set => ({
  count: 1,
  inc: () => set(state => ({ count: state.count + 1 })),
  dec: () => set(state => ({ count: state.count - 1 }))
}))

function Counter() {
  const count = useStore(state => state.count)
  return <span>{count}</span>
}

function Controls() {
  const { inc, dec } = useStore()
  return (
    <>
      <button onClick={inc}>up</button>
      <button onClick={dec}>down</button>
    </>
  )
}

아주 간단하지만 이걸로 끝입니다.

위의 코드를 한 번 짚어볼까요?
위에서 create함수는 스토어를 생성하고

• count: 변환될 값,
• inc: count를 1증가시키는 함수,
• dec: count를 1감소시키는 함수,

라는 값들을 설정합니다.
set은 현재 state를 받아 새로운 state를 반환하는 함수를 인자로 받습니다.

create는 배열을 리턴하며 배열은 [useStore, api]를 리턴하게 되는데,

useStore를 통해 바로 컴포넌트에서 스토어에 작성한 값들을 사용할 수 있습니다.
또한 api는 컴포넌트가 아닌 위치에서도 값을 가져오고 사용할 수 있도록 만들어줍니다.

짧은 코드지만, redux의 기본이 되는 작업들을 모두 수행하고있죠?
아마 redux를 사용하신 경험이 있으시다면, 몇 가지 질문들이 있으실 수 있다고 생각합니다.

1. Provider는 필요 없습니다.
2. 굳이 따지자면 redux보단 flux와 유사합니다.
3. immer를 사용해 nested object를 처리하실 수 있습니다.
4. 제공해주는 api를 통해 redux-devtools을 통한 디버깅이 가능합니다.
5. react-redux의 useSelector hook처럼 기본적으론 ===비교를 하지만 마찬가지로 다른 비교 함수를 통한 state 비교도 가능합니다.

redux전부를 대체하기보단, 아무래도 많은 부분이 hook으로 대체되는 요즘, custom hook작성에 안성맞춤일 라이브러리라고 생각됩니다. 물론 많이 퍼지지 않는 작은 상태공유가 문제라면 아주 좋은 답안 중 하나가 될 거라는 것은 당연하구요.

이번 포스트는 많은 내용을 담고있는 포스트라기보다, 핵심적인 내용만 전달드리고자 했기 때문에 자세한 내용은 공식 깃헙 주소(클릭)에서 확인해주세요.

Reference

• https://github.com/react-spring/zustand

오탈자 및 잘못된 내용에 대해선 댓글로 알려주시면 반영하도록 하겠습니다.
감사합니다 😀