React) 상태관리 라이브러리 Zustand

BongHee·2023년 2월 14일
0

React

목록 보기
6/7

상태관리 라이브러리 Zustand

  1. Redux와 비교했을 때 Zustand 차이
  • 훅을 이용한 상태관리
  • 컨텍스트 프로바이더가 필요 없다.
    (컨텍스트 프로바이더란? context에 상태를 제공, 즉 다른 컴포넌트가 해당 상태에 접근해 사용용 리덕스에서는 루트 컴포넌트에 Provider를 제공 해야함)
  1. Redux와 동일한 Flux패턴

    Flux패턴이란?
    Flux는 사용자 입력을 기반으로 Action을 만들고, Action을 Dispatcher에 전달해서 Store(Model)의 데이터 변경 후 View에 반영하는 단방향 흐름 아키텍처

  • Action
    Action이란 데이터를 변경하는 행위 (Dispatcher에게 전달되는 객체)
    ActionCreator메소드는 새로 발생한 Action의 타입과 데이터(Payload)를 묶어서 Dispatcher에 전달

  • Dispatcher
    모든 데이터 흐름을 관리하는 중앙 허브라고 생각하면 좋다.
    Store들이 등록해놓은 Action타입 마다 콜백 함수 존재
    Store의 데이터를 조작하는건 오직 Dispatcher를 통해 가능

  • Store(Model)
    상태 저장소로써 상태와 상태를 변경할 수 있는 메소드
    어떤 타입의 Action이 발생했는지에 따라 그에 맞는 데이터 변경을 수행하는 콜백함수를 Dispatcher에 등록.
    View에게 데이터가 변경됨을 알린다.

  • View
    View는 주로 리액트 컴포넌트들을 말한다.

-> 이와같이 Flux패턴은 단방향 흐름에 따라 순서대로 역할을 수행한다.
-> View로부터 새로운 데이터 변경이 생기면 처음부터 다시 이 순서대로 실행이 된다.

Zustand 작동 방식

  1. Store생성부터 시작
import create from 'zustand'

const useStore = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}))

create를 통해 store를 만든다.
각 함수를 통해 state를 변화 시킬 수 있다. (이 자체만으로 리듀서와 액션을 대체 가능)

  1. store 생성 이후 useStore훅을 컴포넌트에 적용
function BearCounter() {
  const bears = useStore(state => state.bears)
  return <h1>{bears} around here ...</h1>
}

function Controls() {
  const increasePopulation = useStore(state => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

useStore를 이용해서 상태관리를 적용한다(훅처럼 작동한다)
useStore를 이용해서 state의 key값을 가져오는 방식으로 컴포넌트에서 꺼내씀..

실제 프로젝트 내 Zustand 동작 코드
(TypeScript 기반 구현)
-> BoilerPlate코드가 확실히 짧아짐

import { create } from 'zustand';

interface PwdStoreInt {
  pwdModalVisibleZustand: boolean;
  pwdToggleZus: () => void;
  countState: number;
  countStateChange: () => void;
}

export const usePwdStore= create<PwdStoreInt>((set) => ({
  pwdModalVisibleZustand: false,
  pwdToggleZus: () =>
    set((state) => ({ pwdModalVisibleZustand: !state.pwdModalVisibleZustand })),
  countState: 0,
  countStateChange: () =>
    set((state) => ({ countState: (state.countState += 1) })),
}));

set함수는 상태를 병합하는 기능을 갖고 (zustand의 특징으로 비동기여도 상관없이 동작한다)
pwdToggleZus는 불리언 타입을 갖고 토글방식으로 불리언값을 변경하는 함수이다.
countStateChange는 countState값을 1씩 증가시키는 함수

  • 컴포넌트 내 zustand 적용 코드 (리덕스에 dispatch, useSelector)
import { usePwdStore } from '../../store/zustand';

// Zustand 상태관리
  const { pwdModalVisibleZustand, pwdToggleZus, countState, countStateChange } =
   usePwdStore();

// Zustand 상태 관리 라이브러리 state 변경 코드
    pwdToggleZus();
		countStateChange()
    console.log(pwdModalVisibleZustand, countState);
		//true/false 토글 형식으로 변경, 1,2,3,4,.... 1씩 증가
profile
배움에 두려움이 없고 개발을 즐기는 사람

0개의 댓글