[Architecture] Flux Architecture

Flux 이란

• 단방향 데이터 흐름을 통해 보다 예측가능하게 상태를 관리할 수 있는 클라이언트 사이드 웹 어플리케이션 아키텍쳐

기존의 방식은 MVC 패턴

• Model, View, Controller 를 사용하여 유연성과 재사용성을 증가시킨 디자인패턴이다.

1. Cotroller가 Model를 조작하고 Model이 View를 업데이트하며 View도 Model를 직접 업데이트한다.
2. Model과 View가 서로 직접 업데이트하는 것을 양방향 데이터바인딩이라고 한다.

하지만 MVC가 클라이언트 사이드로 넘어오면서 MVC는 이러한 방법으로 변경되었다

• 차이점은 View가 Model를 가르키는 화살표가 사라진것이다.
• MCV 패턴이 클라이언트 사이드로 넘어오면서 많은 프레임워크로 인하여 실제적으로 양방향 바인딩으로 구현이 되어버렸다

---

• 결국 이러한 결과로 나타나게 된다 나만 알 수 있는 코드상태로

다시 Flux로

1. Action
   

   • 액션 이름(type)
   • 데이터(payload)

2. Dispatcher

   • View로부터 Action을 받아 모든 Store들에게 전송
   • 내붑에 상태 변경 로직이 존재하지 않음
   • Store 간 의존성 관리
     • Store A의 상태 변경 순서를 Store B 다음으로 미룰 수 있음

3. Store

   • Dispatcher에서 전달된 Action을 통해서만 상태 변경
   • 상태가 변경되면 View에게 통지

4. View

   • Controller-View(React)
     • Store가 통지하는 상태 변경을 수신
     • 받은 상태에 따라 View를 새로 렌더링
   • Dispatcher에게 Action 전달

• 정리하면
  

Flux 장점

1. 데이터 흐름을 구조화하여 전체 흐름을 파악하고이는 개발자에게 의존하는 것이 아니라 팀원 누구나 각각의 액션을 따라가 어떤 변경이 발생하는지 알 수 있어 코드의 흐름을 파악하기 쉬워진다
2. 결국 코드를 유지보수하기에 쉽게 만들고 새로운 기능확장에 보다 더 유연하다
3. 또한 유닛테스트도 쉬워진다.

Flux 단점

1. 초기에 작은 기능을 정리하기에 많은 코드가 필요하다.
2. 러닝커브가 높다.

---

https://youtu.be/wQFBgKl1PYw?si=5UzgSx9_fh_gvqHx