[WEB] FLUX 패턴

FLUX

FLUX는 FaceBook에서 고안한 단반향 데이터 흐름의 디자인 패턴이다.

 

---

 

FLUX 패턴은 REACT Redux의 디자인 패턴으로 사용되고 있다.

 

MVC 모델을 사용하고 있던 FaceBook에서 데이터가 많아지고,

복잡해지자 예상치 못한 오류들을 FaceBook에게 안겨주었다.

 

 

위 그림처럼 복잡해졌고, FaceBook은 이를 해결하기 위해 FLUX 패턴을 고안해낸다.

 

 

---

FLUX 패턴

FLUX 패턴

FLUX 패턴은 데이터를 보다 명확하게 구분하기 위해, MVC 복잡성을 해결하기 위해 데이터의 방향이 한쪽으로만 이동한다. 

 

 

FLUX 요소

• Action
• Dispatcher
• Store
• View

 

🔥 Action

Action은 데이터 상태 변경을 도와준다.

Action 생성자는 type과 payload를 묶어 Dispatcher로 전달해준다.

 

 

🔥 Dispatcher

Dispatcher은 Action이 발생하면 그 값을 Store에 전달하는 역할을 해준다.

중앙 허브를 담당하는 Dispatcher는 Store에 접근하여 Action에 담긴 값을 통해 정보를 수정한다.

 

 

🔥 Store

Store는 데이터 상태와 데이터 상태를 변경할 수 있는 메서드를 가지고 있다.

 

 

🔥 View

View는 Store의 데이터 값을 가져와 화면에 렌더링, 보여주는 역할을 한다.

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!