Flux architecture

최근 채용 시장에서 Flux 아키텍처에 대한 이해도를 원하는 곳이 생기고 있다. 기본적으로 Modern Web Frontend 개발에서 MVVM이 아키텍처가 대세였었는데 새로운 트렌드를 발견하여 정리한다.

Flux architecture

---

Flux 아키텍처의 특징

1. 단방향 데이터 흐름: 애플리케이션에서 데이터의 흐름이 일방향으로만 진행된다. 사용자의 입력이나 이벤트가 발생하면 이를 처리하기 위해 데이터가 단방향으로 흐른다.
2. 중앙 집중화된 스토어: 애플리케이션의 상태는 중앙 집중화된 스토어에 저장된다. 상태 변경은 액션(Action)을 통해 스토어에 전달되고, 스토어가 변경되면 이를 뷰에 알리고 다시 렌더링된다.
3. 뷰와 비즈니스 로직의 분리: Flux 아키텍처에서는 뷰와 비즈니스 로직이 분리되어 있다. 뷰는 단순히 상태에 따라 렌더링되며, 비즈니스 로직은 액션과 스토어에서 처리된다.

MVVM 아키텍처와 Flux 아키텍처의 차이

1. 데이터 흐름 방향: MVVM은 양방향 데이터 바인딩을 사용하여 데이터의 양방향 흐름을 갖는다. 반면 Flux는 단방향 데이터 흐름을 갖는다.
2. 컴포넌트 간 통신: MVVM에서는 View와 ViewModel이 양방향으로 통신한다. 반면 Flux에서는 단방향으로 데이터가 흐르므로 컴포넌트 간의 통신이 명시적이고 중앙 집중화된다.
3. 스토어의 역할: MVVM에서는 ViewModel이 데이터를 관리하고 제공한다. Flux에서는 중앙 스토어가 애플리케이션의 상태를 관리하고, 상태 변경 시 뷰에게 전달한다.
4. 테스트 방법: MVVM은 각 부분이 분리되어 있어 테스트가 상대적으로 쉽습니다. Flux도 테스트가 용이하지만, 단방향 데이터 흐름과 중앙 집중화된 스토어를 다루는 특성에 따라 테스트가 더 명확하게 진행됩니다.

---

최근 상태관리를 하는 Redux 라이브러리 등이 Flux 아키텍처라고 칭해지는것 같다. 나는 아직까지 상태관리를 이용하여 실무를 경험한 적이 없기 때문에 기회가 된다면 꼭 운용해보고싶다.