Facebook의 Flux 패턴

김혜지·2021년 1월 11일

docs-translation

Link

Overview

Flux는 애플리케이션의 데이터 흐름을 관리하기 위한 단방향 패턴이다.

Flux Parts

Dispatcher
Store
Action
View

Dispatcher

dispatcher는 actions을 받아 dispatcher에게 등록된 store로 전달한다. 모든 store는 모든 action을 받는다. 각 애플리케이션에는 단 하나의 dispatcher를 가진다.

예제
1. 사용자가 todo의 제목을 입력하고 엔터를 친다.
2. view는 이 이벤트를 캡처하여 todo의 제목이 담긴 "add-todo" action을 dispatch(발송)한다.(dispatcher에게 알린다.)
3. 모든 store는 이 action을 받는다.

Store

Store는 애플리케이션의 데이터를 보관하는 곳이다. Store는 dispatcher에게 등록되어 action을 받을 수 있습니다. Store의 데이터는 action에 응답하여만 변해야 합니다. Store에는 public setter가 없어야 하며, 단지 getter만 있어야 합니다. Store는 응답할 action을 결정합니다. Store의 데이터가 변경될 때마다 "change" 이벤트를 내보내야 합니다. 각 응용 프로그램에는 많은 store가 있어야 합니다.

예제
1. Store는 "add-todo" action을 수신한다.
2. 관련성이 있다고 판단되면 오늘의 todo 목록에 해당 todo를 추가한다.
3. Store는 데이터를 업데이트한 뒤 "change" 이벤트를 내보낸다.

Actions

Action은 애플리케이션의 내부 API를 정의한다. 애플리케이션과 상호 작용할 수 있는 방법을 캡처한다. Action은 "type" 필드와 일부 데이터가 있는 단순한 object이다.
Action은 sementic 해야하고 기술적으로 설명할 수 있어야 한다. 해당 action의 구현 세부 사항을 기술해서는 안된다. delete-user-id, clear-user-data, refresh-credentials 와 같이 구분하지 않고 delete-user를 사용한다. 모든 store는 action을 수신하며 동일한 delete-user action을 처리하여 데이터를 지우거나 credential을 새로 고쳐야 한다.

예제
1. 유저가 "delete" 버튼을 누르면 delete-todo action이 발송된다.

 {
    type: 'delete-todo',
    todoID: '1234',
 }

Views (components)

store의 데이터가 view에 표시된다. View는 원하는 프레임워크를 사용해 만들 수 있다. View에서 store의 데이터를 사용하는 경우, 해당 store의 "change" 이벤트를 구독해야 한다. 그 다음, store가 변경 사항을 전송하면 view가 새 데이터를 가져와 다시 렌더링할 수 있다. View가 store의 데이터를 사용하고 구독하지 않으면 버그가 발견된 가능성이 높다. 일반적으로 사용자가 애플리케이션 인터페이스의 일부와 상호작용할 때 action이 view에서 발송된다.

예제
1. 메인 view가 TodoStore를 구독한다.
2. Todos 목록에 접근하여 사용자가 읽을 수 있는 형태로 렌더링한다.
3. 사용자가 새 todo의 제목을 입력한 후 엔터를 누르면 view는 dispcher에게 action을 발송하게 한다.
4. 모든 store는 발송된 action을 수신한다.
5. TodoStore는 action을 처리하고 내부 데이터 구조에 Todo를 추가한 뒤 "change" 이벤트를 발생시킨다.
6. 메인 view는 "change" 이벤트를 청취하고 있다. 이벤트가 발생하면 TodoStore로부터 새로운 데이터를 가져와서 UI에 Todo 목록을 다시 렌더링한다.