Flux 패턴

 

 

Flux패턴은 MVC모델의 단점을 보완하기 위해 페북에서 만든 새로운 패턴이다.

 

MVC 패턴

MVC 패턴은 보는것과 같이 양방향이다.

 

양방향 데이터 흐름은 복잡하지 않은 어플리케이션에서는 문제가 없겠지만, 규모가 큰 어플리케이션에서는 view가 또다른 model을 업데이트 시키고 업데이트 된 model이 view2를 업데이트 시키고... 이렇게 되면 개발자들이 어플리케이션의 패턴을 예측하기가 힘들어진다.

 

Flux 패턴

페북에서는 이를 해결하기 위해 단방향 데이터 흐름인 Flux 패턴을 도입했다.

 

리액트에서 무조건 부모컴포넌트만 자식컴포넌트에게 props를 전달할 수 있는 규칙도 Flux 패턴중 하나이다.

 

• Action : 새로 발생한 액션타입과 페이로드를 Dispatcher로 전달
• Dispatcher : 액션을 스토어에 전달
• Store(Model) : 액션 타입에 따라 메서드를 다르게 적용하여 상태변경
• View : 리액트에 해당하는 부분. 화면을 새로 렌더링한다.

 

라고 작성했지만, 그냥 쉽게 말하면

 

1. 액션이 발생하면

2. 디스패쳐가 액션을 스토어에 전달하고

3. 스토어에서 액션에 따라 상태변경을 하고

4. 상태변경에 따라 렌더링한다

 

그리고 역주행은 하지 않는다

=> 양방향 데이터 흐름과 비교했을 때 예측 불가능 정도가 더 낮아짐

 

라고 생각하면 될 것 같다.

 

그리고 이를 통해  복잡도를 낮춘 것, 

 

 

---

참고자료

https://www.huskyhoochu.com/flux-architecture/

https://beomy.tistory.com/44

https://leesoo7595.github.io/react/til/2021/09/17/React_flux_pattern/