리액트 네이티브 앱 제작 원론. 5장 플럭스와 리덕스

Flux (https://facebook.github.io/flux/)

Flux는 전통적인 MVC 아키텍쳐를 대체하기 위해 페이스북에서 제안한 아키텍쳐입니다. 

일반적인 MVC 아키텍쳐에서 Controller를 중심으로 데이터가 양방향으로 오가는 것과 달리 플럭스는 다음과 같은 특징을 갖습니다.

• 데이터 흐름의 일방향화
• 공유된 가변 상태의 제거

각 컴포넌트들이 상태를 단방향으로 전달하는 동안, 모든 상태 변경은 오직 Store가 담당하고 있습니다. 이렇게 가변성을 한 곳에 집중시킴으로써, 버그가 발생했을 때 개발자가 들여다봐야할 곳을 명확하게 만들어 줍니다.

Redux (https://redux.js.org/)

Redux는 Flux를 기반으로 구현된 데이터 처리 라이브러리입니다. 다만, Flux를 그대로 구현한 것은 아니고 약간의 구조적 개선도 포함되어 있습니다. 논리적 도메인에 따라 서로 다른 Store를 여러 개 만드는 Flux와 달리 Redux에서는 Reducer라는 함수를 통해 스토어들을 다시 한 곳에 모아 관리하고, View를 더 효율적으로 갱신합니다.

React Redux (https://github.com/reactjs/react-redux)

React Redux는 React 애플리케이션에 Redux를 채용할 때 주로 사용되는 라이브러리입니다. Store를 랩핑하는 Provider라는 컴포넌트를 제공함으로써, 애플리케이션의 상태에 접근해야 하는 모든 Container 컴포넌트(Flux에서 View에 해당)가 Store에 접근할 수 있게 해줍니다.

React Promise (https://github.com/capaj/react-promise)

Redux 자체는 synchronous하게 동작하도록 되어 있습니다. 때문에 서버에서 데이터를 가져오는 것과 같이 Asynchronous한 작업을 지원하기 위해 미들웨어 아키텍쳐를 제공합니다. 미들웨어는 Action 디스패치와 Reducer 사이에 주입되며, React Promise는 이를 위한 미들웨어 라이브러리 중 하나 입니다.

Sample Code (https://github.com/utrpanic/today-what-else/tree/master/Countly)

+, -, reset 버튼 3개를 제공하는 계수기를 작성하였습니다. onPress가 발생할 때 Action을 생성하여 디스패치합니다.