[React.js] Zustand 사용하기 (TS)

Zustand란

Zustand란 간소화된 Flux 원칙을 사용하는 상태관리 라이브러리이다.
점점 인기가 많아지고 있는 라이브러리라 이번 기회에 공부하고 사용해보고자 하였다.

 

Zustand의 특징

• 한 개의 store를 사용하여 중앙 집중식으로 상태관리가 이루어진다.
• 코드 양이 절대적으로 적고 쉽다.
• 특정 라이브러리에 엮이지 않는다.
• provider와 같은 context를 제공하지 않고도 사용가능하다.

한 개의 store를 사용한다는 점에서 redux와 비슷하지만 개발자가 reducer, action등을 직접 만들어줘야하는 redux에 비해서 zustand는 Hooks를 사용하여 상태를 이용하기 때문에 코드 양이 훨씬 적고 간결하여 러닝커브가 낮다.

 

Zustand 사용하기

zustand 설치

npm install zustand

 

store 생성

• 스토어를 생성하기 위해 create 함수 사용
• 스토어는 상태 변수와 상태를 업데이트하는 액션 함수로 구성

 

상태 변수 및 액션 사용

• 상태 변수와 액션을 사용하려면 컴포넌트 내에서 useStore 함수를 호출
• 상태 변수의 경우 불필요한 리렌더링을 막기 위해 selector를 사용해서 하나하나씩 들고 와야 함
  - 객체 상태로 들고오면 하나의 상태가 바뀔 때 이를 사용하지 않는 다른 컴포넌트도 리렌더링 됨
• 액션 함수의 경우 절대 변하지 않기 때문에 객체 상태로 가져와도 무방

 

※ vscode 확장 프로그램 - Zustand Snippet

 

설치후 zus 입력 후 tab을 치면 zustand의 기본구조를 자동으로 만들어준다.

 

 

※ redux-devtools 사용하기

zustand에서 미들웨어를 통해 redux-devtools를 사용할 수 있다!

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const myStore = set => ({
	count: 0,

	increaseCount: state => {
		set(state => {
			return { count: state.count + 1 };
		});
	},
});

const useStore = create(devtools(myStore));

export default useStore;

---