State 관리 라이브러리 사용 목적
다중 계증 컴포넌트에서 데이터와 메소드 접근의 복잡성 해결
컴포넌트에 집중된 비즈니스 로직의 분리
가장 많이쓰이는 Redux 와 Mobx 그리고 최근 페이스북에서 만든 상태관리를 위한 Recoil까지 무엇을 사용할지 고민이 된다.
Npm trends를 보니 여전히 아직도 Redux가 압도적이다.
Redux
Redux는 두말할 것도 없이 가장 유명한 상태 관리 라이브러리로 MVC 패턴의 문제점을 극복하고자 페이스북에서 고안한 Flux 아키텍처를 기반으로 구현되었다.
Redux를 사용하기 위해서는 Action, Reducer, Dispatcher, Store, View 등에 대한 개념을 이해해야 한다.
action
Redux에서 state를 바꾸는 방식이다. 액션 객체를 가지고 있고, 반드지 type 필드가 있어야 한다.
Dispatch
Action을 발생시키는 것으로 action 객체를 파라미터로 받는다.
Reducer
변화를 일으키는 함수로 action의 결과로 state를 어떤 식으로 바꿀지 구체적으로 정의하는 부분이다. 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아서 새로운 상태로 반환해준다. 리듀서는 파라미터 외의 값을 의존하면 안되고, 이전 상태는 건드리지 않은 상태로 새로운 상태 객체를 만들어 반환하는 순수 함수여야 한다.
Store
프로젝트에 리덕스를 적용하기 위해 필요한 것으로 프로젝트에는 단 한 개의 Store만 가지며 상태의 중앙 저장소라고 할 수 있다. Store안에는 리듀서와 내장 함수 등이 포함되어 있다. dispatch와 subscribe 등도 스토어의 내장 함수이다. 상태를 읽을 때는 getState() , 상태를 바꿀 때는 dispatch()를 호출한다.
middleware
리덕스 미들웨어를 사용하면 action이 dispatch 된 다음, reducer에서 해당 ation을 받아와서 업데이트하기 전에 추가적인 작업을 할 수 있습니다.
일반적으로는 리덕스 미들에웨어 라이브러리를 설치하여 사용한다. 비동기 작업에 관련된 미들웨어 라이브러리는 redux-thunk, redux-saga, redux-observable, redux-promise-middleware 등을 사용한다.
특징
상태를 전역적으로 관리.(단일 Store)
데이터의 흐름이 단방향.
state는 읽기전용이다.(불변성 유지 - immutable)
러닝커브가 높다..
적지않은 코드량..
Mobx
Mobx는 Redux와 비슷한 상태 관리 라이브러리이지만 Redux에 비해 간결하고 깔끔한 구조를 가지고 있다는 평가를 받는다. Mobx의 컨셉은 아래와 같다. 가장 큰 특징은 모든 상태 변화가 일어나는 부분을 자동으로 추적해주는 것이다.
State
Observable State로 관찰 받고 있는 데이터이다. Mobx에서는 해당 State가 관찰하고 있다가 변화가 일어나면 Reactions과 Derivations를 발생시킨다.
Derivations(Computed values)
기존의 상태가 변화에 따라 계산된(파생된) 값을 의미한다.
Reactions
Observable State의 변화에 따른 부가적인 변화를 의미하고 값이 바뀜에 따라 해야할 일을 정하는 것이다. Derivation과는 달리 값을 생성하지는 않고, 대체로 I/O와 관련된 작업을 하고, DOM업데이트와 네트워크 요청 등에 관여한다.
Action
상태를 변경시키는 모든 것을 의미한다. Mobx에서는 모든 사용자의 액션으로 발생하는 상태 변화들이 전부 Derivations와 Reactions로 처리되도록 한다.
특징
객체 지향적이다. (Spring과 유사해서 Backend 개발자에게 친화적)
Store에 제한이 없다. (multi Store)
State 불변성을 유지안해도된다.(mutable)
Recoil
추후 스터디후 업데이트 예정
References
https://ykss.netlify.app/react/redux_mobx_recoil/
https://www.bangseongbeom.com/redux-benefits-caveats.html
https://lannex.github.io/blog/2020/redux-mobx/
https://techblog.woowahan.com/2599/
