[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - Zustand

 

이번 프로젝트를 하며 처음 사용해본 상태관리 라이브러리인 zustand에 대해 정리를 해논 블로그다. 앞으로 어떤 방향으로 사용할 지에 대한 내용을 적어놀 것이다.

 

🤔 Zustand란?

 

zustand는 context API를 간편하게 사용하기 위해 만들어진 상태관리 라이브러리다. 상태관리를 하기위해 Context API, Redux, React Query, Zustand 등이 있지만 Zustand를 사용하는 가장 큰 이유는 코드를 사용하는데 간편하기 때문이다. 

 

✏️ Zustand 사용법

사용법은 Redux를 사용할 때와 비슷하다. 

store 폴더를 만들고 그 안에 전역 변수를 선언해주면 된다. 하지만 나는 타입스크립트를 같이 사용하고 있기 때문에 타입도 추가로 지정해주면 된다.

 

// store
import { create } from 'zustand';

interface ModalBuyStore {
    isOpenBuyModal: boolean;
    setIsOpenBuyModal: (state: boolean) => void;
}

const useBuyModalStore = create<ModalBuyStore>((set) => ({
    isOpenBuyModal: false,
    setIsOpenBuyModal: (state) => set({ isOpenBuyModal: state }),
}));

export { useBuyModalStore };

 

1. 타입 선언

현재 상태(state)와 현재 상태를 바꾸는 함수(useState)에 타입을 지정해준다.

 

2. state값 지정하기

현재 상태(state)에 초기값을 넣어주고 상태 변경 함수에 작동 방식을 지정해준다. 

 

⚒️ store 사용하기

// component

import { useBuyModalStore } from '../store/shoppingHeaderSelectBarStore';

const example = () => {
	const { isOpenBuyModal, setIsOpenBuyModal } = useBuyModalStore();
	return <>
    	{isOpenBuyModal && ... }
    </>
}
export {example}

 

사용할 컴포넌트에서 import로 불러온 후 사용해주면 된다. Redux를 사용할 때와 똑같이 사용하면 되서 불편한 점은 없었다. 

 

프로젝트를 시작하기 전에 팀원 형의 추천으로 zustand를 사용하게 되었는데, 처음 사용했는데도 불구하고 어색함이 없었다. 이전에는 Redux Toolkit을 사용해봤는데 상태관리 라이브러리는 다 비슷하게 만들어진거 같아서 편하게 사용할 수 있었다.