XState
비즈니스 로직과 UI 로직의 분리!
FSM(Finite State Machine, 유한 상태 기계)을 내 코드 안으로!
FSM?
위의 4가지 상태를 각각 Boolean 값으로 관리한다면?
- isIdle
- isLoading
- isSuccess
- isFailure
=> 2*2*2*2 총 16가지의 경우의 수 조합 가능, 결과적으로 불필요한 방어 코드가 필요하고, 관리도 어려우며, 생산성이 떨어짐
하나의 Enum 변수로 정의하여 관리한다면?
=> idle에서 failure로 바로 가는 등의 로직도 불가능해야 하나 논리적으로 문제가 없어서 가능해짐. 4가지를 Boolean으로 관리하는 것과 크게 다르지 않음(이전, 이후 상태에 대한 검증 코드 필요, 상태 전이(Transition) 시 실행해야 하는 함수나 로직 등에 대해 구조화 어려움)
FSM으로 관리하면 불필요한 로직이 없어지고, 정확한 상태 정의에 의해 논리적이고 생산적인 코드 작성 가능!
XState를 React와 연결하여 쓸 때,
커뮤니티 버전인 use-machine 패키지 말고, 공식 @xstate/react를 쓰는 것이 좋을 것 같다.
event 전달 시 data 보내기 등이 use-machine에서 불가
커뮤니티 버전인 use-machine 패키지 말고, 공식 @xstate/react를 쓰는 것이 좋을 것 같다.
event 전달 시 data 보내기 등이 use-machine에서 불가
createMachine 등을 사용해도 Machine Config을 이용해 새로운 machine 인스턴스가 만들어짐
따라서, 전역 상태 관리 위해선 별도의 라이브러리(Zustand 등)를 사용하여 머신에 연결해야 함
=> XState의 Service 개념을 사용하면 전역 상태 관리도 가능한 걸로 확인....!
코드 변경점
https://github.com/studroid/lemonbase-onboarding-review-service-frontend/pull/2
참고 자료
https://github.com/davidkpiano/xstate
https://xstate.js.org/docs/packages/xstate-react/#quick-start
