[React] Zustand

목차

1. Zustand란

2. Zustand 사용법

3. Zustand와 Redux

---

Zustand란

Zustand는 전역 상태 관리 라이브러리입니다.

 

상태를 직관적으로 조회 및 제어할 수 있고 보일러 플레이트 코드 양이 적어서 간단한 사용이 가능합니다. 또한 컴포넌트 외부에서도 전역 상태에 접근할수있고 Context API를 사용하지 않아도 되기 때문에 불필요한 리렌더링을 최소화 할 수 있다는 특징이 있습니다.

---

Zustand 사용법

zustand 사용법은 redux에 비해 간단합니다.

store를 생성하고 사용할 상태와 함수를 정의하고, 외부에서 끌어다 쓰기만 하면 됩니다.

 

store 생성 및 상태와 set함수 정의

import {create} from "zustand/react";

const useStore = create(set => ({
    count: 0,
    increment: () => set( state => {
        return {count: state.count + 1}
    }),
    decrement: () => set( state => ({count: state.count - 1})),
    setCount: (number) => set( state => ({count: number, prev: state.count}))
}))

export default useStore

 

zustand의 사용 첫번째는 store를 생성하는 것입니다. use~store라는 네이밍을 사용해서 store를 생성해줍니다.

 

create

zustand에서 제공하는 create를 통해 store에서 사용할 상태 및 set 함수를 정의해 줍니다.

store에서 관리할 상태 및 함수를 정의할 수 있습니다.

 

set

create인자로 받는 set은 setter함수라고 생각하면 됩니다.

인자로 받는 set을 통해 store에서 관리하는 상태를 관리할 수 있습니다.

 

상태를 수정하고 반환하면 반환한 상태가 store에 저장됩니다.

 

이전 상태

위와 같은 상태에서 prev라는 상태를 추가해서 set을 반환하면 새로운 상태가 추가되어집니다.

setCount: (number) => set( state => ({count: number, prev: state.count}))

이후 상태

state

set인자의 state에는 store에서 관리하는 상태 및 함수입니다.

state값

 

외부에서 사용

import useStore from "../util/zustand/useStore";
import {useEffect, useState} from "react";

function CounterZustand() {
    const {count, increment, decrement, setCount} = useStore(); //정의된 상태와 set함수 전체 호출 가능
    const justCountState = useStore(store => store.count); //단일 상태 정보 조회 가능

    const [inputValue, setInputValue] = useState('');

    useEffect(() => {
        console.log("비교 결과 : ",justCountState === count); //true
    });

    function handleInputChange(e){
        setInputValue(e.target.value)
    }

    function handleClick() {
        setCount(inputValue)
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>decrement</button>
            <input  type="number" value={inputValue} onChange={handleInputChange}/>
            <button onClick={handleClick}>decrement</button>
        </div>
    )
}

export default CounterZustand;

 

상태 조회

import useStore from "../util/zustand/useStore";

const {count, increment, decrement, setCount} = useStore(); //정의된 상태와 set함수 전체 호출 가능

const justCountState = useStore(store => store.count); //단일 상태 정보 조회 가능

 

Redux와 다르게 Provider 이런거 없이 그냥 store를 불러와서 조회하기만 하면 됩니다.

상태 제어

function handleClick() {
    setCount(inputValue)
}

store 외부에서 set함수(상태 제어 함수)를 호출하면 store내부에 저장된 set 함수가 돌면서 store에 저장된 상태들을 업데이트 합니다.

const useStore = create(set => ({
    count: 0,
    increment: () => set( state => {
        return {count: state.count + 1}
    }),
    decrement: () => set( state => ({count: state.count - 1})),
    setCount: (number) => set( state => ({count: number, prev: state.count})) //setCount 호출!
}))

 

상태가 변경되면 zustand 내부에서 훅을 이용해 자동으로 렌더링 되도록 동작합니다.

---

Zustand와 Redux

Zustand와 Redux를 공부하면서 확실히 Zustand 사용이 훨씬 쉽고 빠르게 적응할 수 있었습니다.

그렇다면 Redux는 왜 복잡한 보일러 플레이트를 쓰면서 까지 Flux패턴으로 강제하는지, Zustand는 간단하게 사용할 수 있는데 어떤 단점이 있는지 등을 두 라이브러리를 중점으로 비교해보겠습니다.

 

Redux를 사용하는 이유

Redux의 핵심 단어는 예측 가능성, 중앙 집중식 통제, 디버깅입니다.

 

• 예측 가능성
  • 상태는 반드시 action → dispatch → reducer → store 단방향으로 상태 변경이 발생해야합니다.
    그렇기 때문에 상태를 변경하는 곳이 명확합니다.
  • 순수 함수인 reducer를 통해 결과가 예측 가능해집니다.
• 중앙 집중식 통제
  • 상태 변경은 오직 상태 변경 함수인 reducer에서만 가능합니다.
  • 컴포넌트나 비동기 로직에서 상태 변경이 가능하면 버그 발생시 문제 시작점을 파악하기가 어렵기 때문에 reducer를 강제합니다.
  • zustand는 set함수를 직접 동작시켜서 상태 변경이 가능
    • store내부에서 비동기 호출 또는 컴포넌트 내부에서 store의 setter를 호출해서 변경이 가능합니다.
• 디버깅
  
  • action에서 전달되는 type을 통해 순차적인 기록이 가능합니다.

즉, 디버깅과 상태 변경의 흐름을 추적하기 위해 강제성이 부여되는 것이고 이러한 강제성으로 대규모 프로젝트에서 상태 관리가 용이합니다.

 

zustand는 set을 통해 store가 굉장히 자유롭게 변경이 가능해집니다. 그렇기 때문에 상태 변경의 추적이 거의 불가능하다고 볼 수 있습니다. 그래서 강제성을 통해 전략적인 개발이 필요하기 때문에 대규모 프로젝트에서는 zustand는 부적합합니다.

 

Zustand를 사용하는 이유

Zustand의 핵심 단어는 미니멀리즘, 편의성입니다.

 

• 미니멀리즘
  • redux와 다르게 action, dispatch, reducer와 같은 미들웨어 및 도구들이 필요하지 않습니다.
• 편의성
  • 상태 및 set 함수 정의 후 외부에서 호출만 하면 상태 관리가 가능합니다. (보일러플레이트 코드 제거)
  • provider와 같은 상태주입이 추가적으로 필요하지 않습니다.

즉, 단순히 상태 사용과 관리용으로 단순한 설정 및 사용이 가능하기 때문에 복잡하지 않은 중소규모 프로젝트에서 간단한 상태 관리가 편리합니다.

 

redux는 action, dispatch, reducer 구성요소와 provider 등록 등 보일러플레이트 코드가 꽤 있는 편입니다. 그리고 상태 변경시에도 상태를 만들고 dispatch를 통해 action을 보내는 등 단순 상태 변경의 경우 배보다 배꼽이 큰 경우일 수도 있습니다. 그렇기 때문에 중소규모 프로젝트에서 간단한 상태변경시에는 redux는 부적합합니다.

---

참고

https://mi-dairy.tistory.com/entry/React-Zustand%EC%93%B0%EB%A9%B4-Redux-%EC%9D%B4%EC%A0%9C-%EB%AA%BB-%EC%94%80-Zustand-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0

[React] Zustand쓰면 Redux 이제 못 씀, Zustand 파헤치기

https://insight.infograb.net/blog/2024/11/20/client-state/

React 전역 상태 관리, 무슨 라이브러리 써야 할까? \:\ Redux, Zustand 특징과 장단점 비교

https://f-lab.kr/insight/react-state-management-zustand-20240705?gad_source=1&gad_campaignid=22368870602&gbraid=0AAAAACGgUFeMO4dYFzew6csfMa6Y_jFHY&gclid=CjwKCAiAlrXJBhBAEiwA-5pgwoyno1yi1NWX6_5R1srmQUP1xzFS0uTe7iemV03LEcn7GEgbGjtHuxoCNMAQAvD_BwE

리액트 상태 관리: Zustand를 활용한 간단한 예제

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

Zustand vs Redux (feat. data fetching)