컨텐츠 내 위젯


flux 패턴 JAVASCRIPT

Flux 패턴의 기존의 MVC 패턴의 단점을 보완하고자 페이스북에서 고안한 데이터 관리 패턴이다. 가장 큰 특이점은 데이터의 순환이 한 방향으로만 흐른다는 것이다. 이 패턴은 vuex, redux 등에 영감을 주었다.


위의 도식을 단계별로 설명하면 밑과 같다.

1. Action
사용자가 어떠한 목적을 가진 행위를 일으켰는지 타입을 갖고 있다. 그리고 그 행위에 필요한 페이로드 데이터를 가지고 있다.

1
2
3
4
{
type: 'ADD',
payload: { count: 1 }
}


2. Dispatcher
Action에서 준 신호(..)에 따라 무엇을 가지고(페이로드 데이터), 어떻게 할건지 콜백함수를 통해 Store에게 알려준다. 즉 Action의 타입에 따라 Store의 어떤 메소드를 실행할지를 결정해 주는 역할이다.


3. Store
상태를 가지고 있는 공간인 것과 동시에, 데이터를 다루는 로직들을 가지고 있는 공간이다. 상태가 변경되면 View에다가 새로운 상태를 전달한다.

4. View
구독하고 있는 상태에 따라 re-render 를 실행하며, 브라우저에서 일어난 이벤트를 통해 Aciton을 실행한다.


** 페이로드 데이터란?
데이터 전송에서 실제로 전송하고자 하는 데이터. (Ajax 에서의 responseData 등을 떠올리면 된다.)

핑백

  • 링고파이 : Redux 2020-01-23 10:59:49 #

    ... 는 것이 redux 이다. Redux의 전체적인 흐름을 보기 전에 사전에 알고 있어야 할 것들을 간략하게 정리하도록 하자. http://saysun12.egloos.com/1948273 참고 1. Action =>어떤 행위를 하고, 그 행위가 어떤 데이터를 동반하는지 (payload) ... more

덧글

댓글 입력 영역