상태관리 라이브러리 Zustand
Flux패턴이란?
Flux는 사용자 입력을 기반으로 Action을 만들고, Action을 Dispatcher에 전달해서 Store(Model)의 데이터 변경 후 View에 반영하는 단방향 흐름 아키텍처
Action
Action이란 데이터를 변경하는 행위 (Dispatcher에게 전달되는 객체)
ActionCreator메소드는 새로 발생한 Action의 타입과 데이터(Payload)를 묶어서 Dispatcher에 전달
Dispatcher
모든 데이터 흐름을 관리하는 중앙 허브라고 생각하면 좋다.
Store들이 등록해놓은 Action타입 마다 콜백 함수 존재
Store의 데이터를 조작하는건 오직 Dispatcher를 통해 가능
Store(Model)
상태 저장소로써 상태와 상태를 변경할 수 있는 메소드
어떤 타입의 Action이 발생했는지에 따라 그에 맞는 데이터 변경을 수행하는 콜백함수를 Dispatcher에 등록.
View에게 데이터가 변경됨을 알린다.
View
View는 주로 리액트 컴포넌트들을 말한다.
-> 이와같이 Flux패턴은 단방향 흐름에 따라 순서대로 역할을 수행한다.
-> View로부터 새로운 데이터 변경이 생기면 처음부터 다시 이 순서대로 실행이 된다.
Zustand 작동 방식
import create from 'zustand'
const useStore = create(set => ({
bears: 0,
increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 })
}))
create를 통해 store를 만든다.
각 함수를 통해 state를 변화 시킬 수 있다. (이 자체만으로 리듀서와 액션을 대체 가능)
function BearCounter() {
const bears = useStore(state => state.bears)
return <h1>{bears} around here ...</h1>
}
function Controls() {
const increasePopulation = useStore(state => state.increasePopulation)
return <button onClick={increasePopulation}>one up</button>
}
useStore를 이용해서 상태관리를 적용한다(훅처럼 작동한다)
useStore를 이용해서 state의 key값을 가져오는 방식으로 컴포넌트에서 꺼내씀..
실제 프로젝트 내 Zustand 동작 코드
(TypeScript 기반 구현)
-> BoilerPlate코드가 확실히 짧아짐
import { create } from 'zustand';
interface PwdStoreInt {
pwdModalVisibleZustand: boolean;
pwdToggleZus: () => void;
countState: number;
countStateChange: () => void;
}
export const usePwdStore= create<PwdStoreInt>((set) => ({
pwdModalVisibleZustand: false,
pwdToggleZus: () =>
set((state) => ({ pwdModalVisibleZustand: !state.pwdModalVisibleZustand })),
countState: 0,
countStateChange: () =>
set((state) => ({ countState: (state.countState += 1) })),
}));
set함수는 상태를 병합하는 기능을 갖고 (zustand의 특징으로 비동기여도 상관없이 동작한다)
pwdToggleZus는 불리언 타입을 갖고 토글방식으로 불리언값을 변경하는 함수이다.
countStateChange는 countState값을 1씩 증가시키는 함수
import { usePwdStore } from '../../store/zustand';
// Zustand 상태관리
const { pwdModalVisibleZustand, pwdToggleZus, countState, countStateChange } =
usePwdStore();
// Zustand 상태 관리 라이브러리 state 변경 코드
pwdToggleZus();
countStateChange()
console.log(pwdModalVisibleZustand, countState);
//true/false 토글 형식으로 변경, 1,2,3,4,.... 1씩 증가