Flux

React, Redux에서 사용되는 Flux 패턴은 데이터의 흐름을 단방향으로 관리하는 웹 어플리케이션 디자인 패턴이다.

Action

Redux에서 사용되는 바로 그 액션객체이다. 액션객체는 어플리케이션에서 사용자의 상호작용으로 인해 발생하는 이벤트를 가리키는 객체이다.

즉, 사용자의 상호작용으로 인해 변경되는 객체를 나타낸다.

Dispatch

발생한 action객체를 Store에 전달해주는 역할을 한다.

우리가 Redux를 사용할때

dispatch(sampleReducer({title : 'test'}));

이런식으로 action객체를 reducer 함수에 담아 dispatch하는 코드를 많이 작성하게 된다. 이 dispatch가 액션객체를 함수에 담아 스토어로 전달시켜주는 역할을 하는 것이다.

즉, dispatch를 통하지 않고서는 store의 데이터 변경은 불가능하기 때문에 단방향으로 데이터를 다룰수 있다.

Store

디스패치로 전달받은 액션 객체 상태를 저장하는 역할, 액션객체를 변경하는 2가지의 역할을 수행한다.

• 다만, 두가지 역할을 모두 수행하기 때문에 사용자가 만약 액션객체를 변경하는 로직을 수정하게 될 경우, 기존에 저장되어 있던 상태 들까지 모두 초기화 되어 버린다.

• 이러한 단점을 리덕스에서 두 기능을 분리하여 해결했다.

  • store : 액션 객체의 상태를 저장하는 역할

  • reducer : 액션 객체의 상태를 변경하는 역할

store의 상태가 업데이트 되면, View (Controller View)로 해당 상태가 업데이트 되었다고 알려준다.

View

store에서 데이터를 가져와 화면상에 보여주는 역할을 한다. React의 Component가 좋은 예시이다.

Controller View와 View로 나뉘는데, React에서 사용되는 부모 자식 개념이라고 생각하면 된다. store에 데이터가 업데이트 되었다고 Controller View에 알려주면, 해당 Controller View의 모든 하위 View에게 해당 상태를 업데이트 하는 방식으로 작동한다.