Zustand

https://velog.io/@augusty/Zustand-리액트에서의-Redux-어렵게-쓰지마세요

https://github.com/pmndrs/zustand

• redux 보다 간결하게 코드를 작성하고 싶다.
• redux 랑 비슷하다.
  • (Redux devtools 를 활용할 수 있다.)
• 상위 컴포넌트를 Provider 로 감쌀 필요가 없다.

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() {
	// state 를 사용하는 부분.
  const count = useStore(state => state.count)
  return <span>{count}</span>
}

function Controls() {
	// 호출되어 state 를 변경하는 이벤트를 등록하는 부분.
  const { inc, dec } = useStore()
  return (
    <>
      <button onClick={inc}>up</button>
      <button onClick={dec}>down</button>
    </>
  )
}

• 장점 : 간단하다.

  • store 의 state 를 직접 사용한다. (⇒ props 에 매핑할 필요가 없다.)
  • action 을 정의할 필요 X.
  • 그래서 action 을 구분할 switch case 코드를 작성할 필요 X.

• 단점 : 한글 자료가 너무 없다.