React 상태 관리 라이브러리 Zustand

Zustand란?

• 간단한 Flux 원칙을 사용하는 작고 빠르고 확장 가능한 상태 관리 솔루션이다. Hook 기반으로 하는 편리한 API가 있다.
  • Flux란? 데이터 흐름을 관리해주는 패턴, 데이터 흐름은 단방향으로 흐름, Redux와 비슷하게 동작함.
  • Flux란? 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 동작한다.

Zustand의 장점

• 다른 라이브러리들 보다 이해하기 쉽다. 핵심 로직의 코드줄이 42줄밖에 되지 않아 이해해야할 코드양이 적다.
• Redux Devtools를 사용할 수 있어 debugging에 용이하다.
• 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.

Zustand 사용법

• 설치

# npm
npm install zustand

# yarn
yarn add zustand

• 상태관리하는 store 파일을 만들어야 한다.(store.js)
• store.js에서 가장 상단에 import create from "zustand" 이렇게 임포트를 해줘야 사용 가능하다.
• store Hook을 생성한다.
• 상태를 통합적으로 관리하여 편하다.
• 아무 타입이든 넣을 수 있다.(원시, 객체, 함수)
• set 함수는 상태를 병합한다. —> set함수를 사용할 때 중괄호, 대괄호를 헷갈리지 않게 잘 사용해야함.

이해하기 쉽게 작동되는 원리를 코드로 나타내기

// app.js
export default App() {
  return(
    <div className="App">
      <Counter />
      <button>증가</button>
      <button>감소</button>
    </div>
  )
}

const Counter = () => {
  return <div>Counter</div>
}

// store 생성
import create from 'zustand'; 

const useStore = create(() => ({
  count: 0,
}));

// store에서 값 가져오는 법
import create from "zustand";

const useStore = create(() => ({
  count: 0,
}));

const useStore

export default App() {
  return(
    <div className="App">
      <Counter />
      <button>증가</button>
      <button>감소</button>
    </div>
  )
}

const Counter = () => {
  const { count } = useStore();

  return <div>Counter : { count }</div>
}
//  const { count } = useStore()로 값을 불러온 후 
// return <div>Counter : { count }</div> 이부분에 그냥 바인딩 해주면 끝이다.

// store의 값을 변경하기 : 수정
import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 }))
}));

const useStore

export default App() {
  const { count } = useStore();

  return(
    <div className="App">
      <Counter />
      <button onClick={ increase }>증가</button>
      <button onClick={ decrease }>감소</button>
    </div>
  )
}

const Counter = () => {
  const { count } = useStore();

  return <div>Counter : { count }</div>
}
// state의 값을 변경하는 함수(set)를 store에 미리 만들어 놓고 필요한 
// 컴포넌트에서 불러다 사용하는 것이 여러 컴포넌트에서 사용할 때에 버그를 유발하지 않고 더 좋다.