React - 상태관리 zustand - 기초

1. zustand ?

간단한 Flux 구조를 사용하는 확장 가능한 상태 관리 라이브러리 입니다. Hook 기반으로 편리한 API들을 제공합니다.

* Flux 구조란 ?
- 어느 방향으로 데이터가 전달될지 알지 못하는(양방향 데이터흐름) MVC 패턴의 복잡성을 해소하기 위해, Flux 패턴을 통해 데이터가 단 방향으로만 변경될 수 있도록 만든 구조입니다.

 

• 기존 React의 MVC 패턴의 단점
  상태값을 하위 컴포넌트로 전달해주기 위해 불필요한 컴포넌트에 상태값을 선언해야됩니다.

MVC 패턴

 

• MVC 패턴 단점 해결방안
  상태값을 store에서 관리하여 필요한 컴포넌트에서만 가져와 사용할 수 있도록 해결합니다. (Flux)

Flux 패턴

 

2. 다른 상태관리 라이브러리와 비교

• Redux와 비교
  
  1. Redux를 통해 메뉴 개발한 경험을 바탕으로 봤을 때 구조가 복잡하고, 사용 할 state가 늘어남에 따라 추가할 부분이 많아 난해했던 기억이 있습니다. 이에 반해 zustand는 기존 store 구조를 활용하는 것은 동일하며, 사용 방법이 비교적 간단하는 장점이 있습니다.
  
  2. Provider(store를 손쉽게 연동 하도록 도와주는 컴포넌트)가 필요 없습니다.
  
  3. 제공해주는 api를 통해 redux-devtools을 통한 디버깅이 가능합니다.

 

• Context API와 비교
  
  1. 보일러플레이트(최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드)가 적습니다.
  
  2. 변경 시에만 컴포넌트를 렌더링합니다. (불필요 리렌더링 방지)

 

3. 사용법

3-(1). zustand 설치

• npm 사용 시 => npm i zustand
• yarn 사용 시 => yarn add zustand

3-(2). 적용하기!

• 데이터를 관리하는 store로 쓸 js파일을 생성합니다.
• store를 사용할 때는 create라는 'zustand' 메서드를 사용하여 선언합니다.

import create from 'zustand';

const myStore = create(set => ({
	count: 0, //state

	increaseCount: () => { // count 1만큼 증가
    
        	// set method로 상태 변경 가능
		set(state => state.count + 1);
        
	},

	setCnt: input => { // 입력받은 input만큼 count 설정
		set({ count: input });
	}
    
    	clearCnt: () => { // count 초기화
		set(state => ({count: 0}));
	},
    
}));

export default myStore;

 

• 만든 store 를 import 하여 필요한 곳에 사용합니다.
• 디스트럭처링(구조화된 배열과 같은 이터러블 또는 객체를 1개 이상의 변수에 개별적으로 할당)하여 사용 하거나 직접 import한 store를 호출하여 사용가능합니다.

import myStore from './store/store';

function App() {
	const { count, increaseCount, setCnt, clearCnt } = myStore(); // 방법 1

	/* 방법 2
		let count = myStore(state => state.count);
		let increaseCount = myStore(state => state.increaseCount);
		let setCnt = myStore(state => state.setCnt);
		let clearCnt = myStore(state => state.clearCnt);
	 */

	return (
		<div className="App">
			<div>현재 Cnt == {count}</div>
			<button onClick={increaseCount}>[+1]</button>
			<button onClick={() => setCnt(10)}>[set_10]</button>
			<button onClick={clearCnt}>[clear]</button>
		</div>
	);
}

위 소스코드를 돌리면 count 값을 변경하고 화면에 보여주는 간단한 화면이 구성됩니다.

개인 프로젝트를 구상하고 있는데, zustand를 통해서 상태관리를 해봐야겠다~ 또 추가적으로 사용해보며 블로그 내용을 점점 추가해야겠다!!

 

 

🔗 참고한 글

Zustand 번역