[Front-end/React] Mobx vs Redux (Redux-toolkit)
리액트와 함께 사용하는 상태 관리 라이브러리 정리 및 비교
기존에는 React와 함께 Redux를 사용해왔는데 이번에 새로운 프로젝트를 하게 되면서 리덕스를 계속 사용할 지, 아니면 새로운 라이브러리 Mobx를 도입할 지에 대해 고민하던 중 글을 작성하게 되었습니다.
부족한 점이나 틀린 부분이 있으면 언제든 피드백 환영합니다 :)
React의 Component에서 변경 가능한 데이터를 state,
자식 컴포넌트가 부모 컴포넌트로부터 받아오는 데이터를 props라고 합니다.
우선, Redux
간단하게 용어를 통하여 정리합니다.
Store : 프로젝트 내 상태를 전부 스토어에서 관리합니다.
Subcribe : 컴포넌트는 스토어에 구독 해야 합니다.
Action : 상태에 변화를 일으킬 때 참조할 수 있는 객체, 미리 정의한 Action Type을과 변경할 내용 Payload로 구성되어 있습니다.
Dispatch : 상태를 업데이트 하고 싶을 때 액션을 스토에게 전달해줍니다.
Reducer : 리듀서는 이전 상태와 액션을 합쳐 새로운 상태를 만들어 반환하는 역할을 합니다.
listener : 상태 변화가 생기면 구독하고 있던 컴포넌트에게 알려주기 위해 리스너가 호출됩니다.
Oberver Pattern
옵저버 패턴이란 한 객체의 상태 변화에 따라 다 객체의 상태도 연동되도록 일대다의 의존관계를 두어 어떤 객체의 상태가 변할 때 그 객체에 의존성을 가진 다른 객체들이 그 변화를 통지받고 자동으로 갱신될 수 있도록 만든 패턴!
MobX
Oberver 패턴을 사용한 MobX
₩₩ Obervable State (관찰받고있는 상태) : MobX를 사용하고 있는 앱의 상태는 Observable합니다. 앱에서 사용하고 있는 상태는 변할 수 있으며 변경되면 MobX에서 어느 부분이 변경되었는지 알 수 있습니다.
Computed Value (연산된 값) : 기존의 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값입니다. 주로 성능 최적화를 위하여 많이 사용됩니다. ₩₩
Reactions (반응) : Computed Value의 경우 특정 값을 연산할 때만 처리되는 반면 Reactions은 값이 바뀔 때 특정함수를 실행할 수 있습니다.
Actions** (액션) : 상태에 변화를 일으키는 역할을 합니다.
decorator 문법
MobX의 장점 중 하나는 decorator문법을 사용할 수 있다는 점!
redux의 보일러플레이트 코드를 제거할 수 있다는 점에서 많은 사람들이 매력을 느낍니다.
@observable 함수의 파라미터로 observable state 생성
@reaction 함수로 state 변경 시 특정 함수 실행
@computed 함수는 연산된 값을 사용할 때 사용하며 이 값에 의존하는 state가 변경될 때 미리 값을 계산해놓고 조회할 때 캐싱된 데이터를 사용
@observe 함수는 computed value에 의존하는 값을 주시할 때 사용
@autorun은 reaction이나 computed의 observe 대신 사용될 수 있으며 autorun으로 전달되는 함수에서 사용되는 state를 자동 주시하여 값이 변경 될 때 마다 함수가 실행
@decoratae 함수를 통하여 각 값에 위의 MobX 함수를 적용
특징
캡슐화
Mobx의 Configuration에서 옵션 한 줄로 해당 state 변경은 해당 클래스의 메소드에서만 변경될 수 있도록 가능합니다.
불변성 유지
불변성을 유지하면서 state를 변경하는 코드는 가독성이 매우 떨어지며 depth가 깊어질 수록 실수하기도 쉽습니다. MobX는 그러한 불변성 유지에 대한 걱정을 하지 않아도 됩니니다.
MobX Store
Store는 싱글톤으로 유지해야합니다. 만약 싱글톤이 아니라면 Component에 inject된 Store는 매번 새로운 instance가 되고 Observable state가 따로 생성되기 때문입니다.
MobX Repository
Ajax로 데이터를 가져오는 부분입니다.
더 추가할 예정 ..
