Redux vs Zustand

 

Redux와, Zustand는 React 상태관리 라이브러리로, 두가지 라이브러리 다 Flux 패턴이다.

 

Flux 패턴이란?

단방향 데이터 흐름을 구현하기 위한 클라이언트 사이드 웹 어플리케이션 아키텍쳐 패턴

 

데이터를 예층 가능하게 하고, 데이터 흐름의 복잡성을 해결하는 장점이 있다.

 

 

MVC 패턴과, Flux 패턴를 비교를 해보자.

	MVC 패턴	Flux 패턴
구조
데이터 흐름	양방향	단방향
특징	상태값을 하위 컴포넌트로 전달해주기 위해 불필요한 컴포넌트에 상태값을 선언해야됩니다.	상태값을 store에서 관리하여 필요한 컴포넌트에서만 가져와 사용할 수 있도록 해결합니다.

 

 

Zustand	Redux
복잡한 상태 관리가 필요 없는 작은 규모의 프로젝트에 적합한 가벼운 상태 관리 라이브러리	복잡한 상태 관리를 필요로 하고 긴 개발 기간이 소요되는 큰 규모의 프로젝트에 알맞는 강력한 상태 관리 라이브러리
간단하고 직관적인 API를 제공	구조적이고 표준화 된 상태 관리 방식
Redux보다 더 간결한 방법으로 상태 관리	일관성과 팀 멤버간의 협력을 유지
서버 상태 관리	클라이언트 상태 관리에 좋은 툴
Provider로 감싸주지 않아도 된다.	Provider로 감싸야 한다.

 

Zustand

import { create } from 'zustand'

type State = {
  count: number
}

type Actions = {
  increment: (qty: number) => void
  decrement: (qty: number) => void
}

const useCountStore = create<State & Actions>((set) => ({
  count: 0,
  increment: (qty: number) => set((state) => ({ count: state.count + qty })),
  decrement: (qty: number) => set((state) => ({ count: state.count - qty })),
}))

 

Redux

import { createStore } from 'redux'
import { useSelector, useDispatch } from 'react-redux'

type State = {
  count: number
}

type Action = {
  type: 'increment' | 'decrement'
  qty: number
}

const countReducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + action.qty }
    case 'decrement':
      return { count: state.count - action.qty }
    default:
      return state
  }
}

const countStore = createStore(countReducer)

 

참고

- https://dokit.tistory.com/32

- https://docs.pmnd.rs/zustand/getting-started/comparison

- https://velog.io/@jaewoneee/%EB%B2%88%EC%97%AD-Zustand-vs-Redux

- https://ji-musclecode.tistory.com/32

- https://velog.io/@jyooj08/Zustand-%ED%95%9C-%EB%B0%A9%EC%97%90-%EC%A0%95%EB%A6%AC

- https://velog.io/@s_soo100/Redux-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%8A%A4%ED%84%B0%EB%94%941