React - 상태관리 zustand - devtools

1. Redux - devtools ?

* 설치 링크

Redux DevTools

• 크롬 확장 프로그램 중 하나로 리덕스의 상태 변경 디버깅을 위한  툴입니다.

상태 관리를 Redux로 하셨던 분들은 Redex-devtools 가 익숙하실 겁니다. 그렇다면 zustand에서 해당 툴을 포스팅하는 이유는 바로 zustand는 미들웨어를 통해 Redux-devtools를 사용할 수 있기 때문입니다!

2. 사용법

• 먼저 위 설치 링크에서 Redux DevTools 확장 프로그램을 설치합니다.
• store로 사용하는 파일에 'zustand/middleware'에서 devtools를 임포트 해줍니다.
• sotre 생성 시 create의 콜백 함수를 devtools로 감싸줍니다. 

// 방법 1. store 생성 시 바로 devtools 로 감싸기

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

const useStore = create(
	devtools(set => ({
		count: 0,

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

// 방법 2. store에서 사용할 내부 로직 먼저 선언 후 create(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;

3. 결과 확인

• 개발자 도구(F12)를 열고 Redux 탭을 클릭하면 state의 변경된 값을 바로 확인할 수 있습니다! (하단 빨간 박스)

Redux - devtools 화면

 

 

Redex-devtools은 개발자에게 있어 아주 유용한 툴이다! zustand에서는 사용하기도 쉬우니, 필히 설치 후 개발하는 것을 추천한다!