zustand 상태 관리

zustand란?

ㅁㄴㅇㄹ

zustand의 특징 (장, 단점)

장점

간결하다

쉽다

설정이 간단하다

성능 최적화가 잘 되어 있다. 불필요한 리렌더링을 방지한다.

 

단점

상태가 커지면 관리가 어려울 수 있다. RTK는 미들웨어 등 구조화된 방법을 통해 대규모 앱에서도 전역 상태 관리가 용이하다.

 

 

주요 개념

구독 : 상태의 변경을 감지하고 그 변경에 반응하는 컴포넌트만 업데이트 하는 메커니즘을 말한다.

예를 들어 유튜브에서 구독을 한 구독자에게만 해당 스트리머의 새 영상 업로드 소식이 전달되는 개념에 빗대면 이해가 쉽다.

 

기본 사용법

설치

yarn add zustand

스토어 만들기

src/zustand/bearsStore.js

스토어의 이름 만들기

// src/zustand/bearsStore.js

import { create } from "zustand";

const userBearsStore = create(function (set) {
	return {
    	bears: 0,
        increase: function () {
        	set(function (state) {
            	return {
                	bears: state.bears + 1
                }
            })
        },
        init: function () {
        	set({
            	bears: 0,
            })
        },
});

export default useBearsStore;

스토어에서 만든 전역 상태 사용해보기

// App.jsx

import useBearsStore from "./zustand/bearsStore";

const App = () => {
	const bears = useBearsStore(function (state) {
    return state.bears;
    });
    
    const increase = useBearsStore(function (state) {
    return state.increase;
    });
    
    return (
    	<div>
        	<h2>Zustand</h2>
            <h4>{bears}</h4>
            <button onClick={increase}>+1</button>
        </div>
    );
};

export default App;

구조 분해 할당하여 필요한 상태와 함수 꺼내오기

// App.jsx

import useBearsStore from "./zustand/bearsStore";

const App = () => {
	const { bears, increase } = useBearsStore(function (state) {
    	return state;
    });
    
    return (
    	<div>
        	<h2>Zustand</h2>
            <h4>{bears}</h4>
            <button onClick={increase}>+1</button>
        </div>
    );
};

export default App;

화살표 함수로도 축약 가능하다.

const { bears, increase } = useBearsStore((state) => state);