React - Flux & MobX

1.Flux 개요

MVC 구조

MVC모델

M : Model / Data들을 관리하는 요소
V : View / 사용자에게 보여지는 요소
C : Controller / 특정 이벤트가 발생하면 컨트롤러를 통해 모델에 반영

• MVC 구조의 데이터 흐음은 View와 Model 사이에 양방향 데이터 이동이 가능하다.
• MVC 구조는 View가 많아 질수록 데이터의 흐름과 관리가 어렵다.
• React는 단방향 데이터 흐름(Model > View)만 가능하기 때문에 MVC 아키텍처는 적용하지않는다.
• 단방향 데이터 흐름은 구조를 단순화 할 수 있으며 데이터의 이동 또한 명확하게 확인할 수 있습니다.

Flux 구조

• Flux란 React를 이용한 UI구성에서 데이터의 흐름을 관리하는 어플리케이션 아키텍처이다.
• View에서 Store로 Data를 보낼수없다.
• Store에서는 View에서 사용할 Data를 관리한다.
• Flux는 단방향 데이터 흐름을 보완하기 위해 개발된 아키텍처이며 View로 분산된 state를 통합관리한다.
• Flux 아키텍처는 Action, Store, Dispatcher, View로 구성된다.
• View 각각의 state는 Store를 이용해 통합 관리되며, Store의 데이터는 Action을 이용해 제어한다.
• Store에서 제어하는 state는 곧 연결된 View의 state와 다름없으며 Store의 state가 변경되며 View도 갱신된다.

Dispatcher : Store를 통해 state를 관리하는데, UI, 또는 시스템에서 발생하는 액션에대한 맵핑을 당담한다. 즉 액션과 Store의 데이터를 Dispatcher를 통해 진행된다.

2.MobX의 개요

MobX란?

• MobX도 Flux와 마찬가지로 클라이언트 사이드에서 state를 관리하기 위해 사용하는 라이브러리이다.
• MobX를 이용하면 컴포넌트의 state를 별도의 영역에서 관리하고 각 컴포넌트는 이에 접근할 수있다.
• MobX를 적용하기 위해서 mobx.js 라이브러리와 mobx-react.js 라이브러리가 필요하다
• MobX는 다수의 store를 관리할수있으며, 관리하는 데이터는 특정 데이터의 형태(Observavle)로 관리한다.

MobX의 대표 라이브러리

• MobX가 제공하는 대표적인 API는 observable, action, observer, computed가 있다.
• MobX 라이브러리는 TypeScript가 적용되어 있으며 API의 사용은 데코레이터(@)를 이용하는것이 일반적이다.
• @observable API는 store에서 관리하고자 하는 state 데이터를 의미하며 Observable 객체를 통해 관리된다.
• @observable API는 @observable API로 관리되는 state를 참조하는 React컴포넌트에 적용한다.

import React from 'react';
import {observable, runInAction} from 'mobx';
import {observer} from 'mobx=react';

const data = observable({
	count:0,
}); 
// MobX를 통해 관리하는 state

setTimeout(
	runInAction(() =>{
    	data.count++;
    }),
    1000
 ); 
 //observable 데이터에 대한 Action
 // action을 주로 사용하지만, 비동기형태를 처리할때 runInAction형태로 사용한다.
 
 @observer
 //observable 데이터 참조 컴포넌트
 class Counter extends React.Component {
 	render(){
    	return <h1>{data.count}</h1>
    }
 }
 export default Counter;

decorator란?
데코레이터는 '데코레이터 함수'(또는 메서드)의 약자이다. 새로운 함수를 반환하여 전달된 함수 또는 메서드의 동작을 수정하는 함수이다.

그렇다면 왜 decorator를 사용하는가?

• 읽기 쉽고 코드를 조금더 깔끔하게 할수있다.
• Higher-order function보다 적용하기 쉽다.

CRA에서 decorator오류
CRA를 통해 프로젝트를 생성하고 decorator를 사용하면 오류가난다. 이때는 decorator를 사용할수있또록 설정해야한다.

• CRA를 Eject하는방법
• CRA rewired를 이용한다.

CRA rewired 방법
package.json에서 scripts를 수정한다

'scripts':{
		'start':'react-app-rewired start',
		'build':'react-app-rewired build',
		'text':'react-app-rewired test',
		'eject':'react-scripts eject'
},

MobX API

MobX Library가 제공하는 API(store 객체에서 사용)

@action은?
관찰 대상 데이터 즉, observable sate의 값을 변경하는 메서드에 적용한다. state에 대한 단순 조회와 같은 메서드에 적용하는것은 의미가 없다.
@observable의 데이터를 변경할시에 @action을 이용해야하는데, @action이 없을시 데이터를 변경시 각각의 데이터마다 렌더링이 일어나 불필요한 렌더링을 일으킨다.
@computed은?
성능향상을 위해 사용하는 API이다. get 메서드에 일반적으로 적용하거나 Model 객체간 전환 시점에 적용한다. @computed가 적용된 메서드를 수행할 때 해당 observable state의 변화가 없을 경우 내부 로직을 생략한다.

MobX와 react를 연결해주는 MobX-react library가 제공하는 API(리액트 컴포넌트에적용)

@inject는?
스토어 객체를 리액트 컴포넌트로 주입해줄때 사용된다. inject로 주입이 된 스토어 객체들은 props에서 꺼내서 사용한다. inject로 주입을 받기 위해서는 proivder를 통해서 전체 store들이 제공되어야한다는게 전제되어야한다.
@autorun는?
예로 @observable의 log라는 data가 변경되었을때 수행되는 작업을 지정할때 사용되는 API이다. 하지만 리액트에서는 autorun을 많이 사용하지않는다.
@observer는?
기본적으로 리액트 컴포넌트 모두에다가 적요하는 API이다. observer는 observable data를 관찰하는 컴포넌트에 적용하는 API로 @autorun을 이용해서 observable data 가 변경되면 렌더링을 다시한다.