zustand 맛보기

redux, recoil 등의 전역 상태 관리 라이브러리도 있고, contextAPI처럼 react 자체 기능으로 전역 상태를 관리 할 수도 있다.  개인적으로 recoil이 react 스러워서 보기 편하지만, 그냥 쓰기 쉬운 zustand를 맛보도록 하자.

 

독일어로 "상태" 라는 의미라고하니 이 얼마나 직관적인가.

 

yarn add zustand

 

라이브러리를 설치 해주고, store폴더에 걸맞는 이름으로 파일을 만들어주자.

src > store > login.ts

 

import { create } from 'zustand';

interface LoginStore {
  isLogined: boolean;
  login: () => void;
  logout: () => void;
}

export const useLoginStore = create<LoginStore>(set => ({
  isLogined: false,
  login: () => set(state => ({ isLogined: true })),
  logout: () => set(state => ({ isLogined: false }))
}));

 

zustand에서 create함수를 가져와서 위 처럼 스토어를 생성해준다. create함수의 인자로 넘기는 함수에서 set은 스토어를 업데이트 해주는 함수이다. 

 

이렇게 만들어 놓은 스토어는

 

const ProfilePage = ()=>{
	const isLogined = useLoginStore(store => store.isLogined);
    
    return ...
}

컴포넌트에서 쉽게 가져다가 쓸 수 있다.