Flux 패턴이란?
Flux 패턴은 React.js 라이브러리에서 사용되는 상태 관리 디자인 패턴 중 하나입니다. 애플리케이션 내의 데이터 흐름을 일관성 있게 관리하기 위한 패턴으로, 단방향 데이터 흐름을 구현합니다. 데이터를 수정할 때 이전 데이터를 변경하는 것이 아닌, 새로운 데이터를 생성하는 방식으로 작동합니다.
Flux 패턴은 애플리케이션 내에서 구성요소 간의 관계를 분리하여 각 구성요소가 독립적으로 작동하도록 설계되어 있습니다.
Flux 패턴이 나오게 된 이유
Flux 패턴은 MVC 패턴의 한계때문에 나오게 되었습니다.
MVC 패턴의 문제점은 어플리케이션의 규모가 커질수록 데이터 흐름의 복잡도가 너무나도 커지고 유지보수가 어려워지는 것이었습니다. MVC 패턴에서 각 모델에서 발생한 이벤트가 어플리케이션 전체로 무차별적으로 번져나가게 된다면 어떤 변화가 일어날지 예측할 수가 없습니다.
Flux 패턴은 이러한 문제를 해결하기 위해 Facebook에서 처음 소개되었습니다.
Flux 패턴은 애플리케이션 내의 데이터 흐름을 단방향으로 유지하며, 각 구성요소가 독립적으로 작동할 수 있도록 설계되어 있습니다. 이러한 특징으로 인해, Flux 패턴은 대규모 애플리케이션에서 복잡성이 증가할 때 유지보수와 디버깅을 쉽게 해주는 장점을 가지고 있습니다.
Flux 패턴의 작동 원리
Flux 패턴은 애플리케이션 내에서 단방향 데이터 흐름을 구현합니다.
Actions → Dispatcher → Store → View의 형태로 데이터가 흐릅니다.
- Actions Action은 일종의 데이터의 상태를 변경할 수 있는 명령어 카드와 같은 역할을 합니다. Action은 대체로 액션 생성자(Action creator)에서 만들어집니다. 액션 생성자는 새로 발생한 액션의 타입과 데이터 페이로드를 액션 메시지로 묶어 Dispatcher로 전달합니다.
- Dispatcher Dispatcher는 Flux 어플리케이션의 모든 데이터 흐름을 관리하는 일종의 허브 역할입니다. 액션이 발생하면 Dispatcher로 메세지나 액션 객체나 전달되고 Dispatcher에서는 이러한 메세지 혹은 액션 객체를 콜백 함수를 통해 스토어로 전달합니다. 만약 스토어가 서로를 의존하고 있다면 특정 스토어가 업데이트되기를 기다리게 해주는 waitFor()를 사용할 수 있습니다.
- Store Store는 어플리케이션의 상태와, 상태를 변경할 수 있는 메서드를 가지고 있습니다. 어떤 타입의 액션이 전달되었냐에 따라 메서드를 다르게 적용해 상태를 변경하게 됩니다. 상태를 변경하기 위해서는 반드시 Dispatcher를 거쳐서 와야합니다.
- View / Controller View View는 Store에서 변경된 데이터를 가져와 화면을 보여주는 역할을 합니다. Controller View는 Store와 View 사이의 관리자 역할을 합니다. Controller View 는 Store의 변경된 데이터를 받아와 모든 자식 View에게 전달하는 역할을 합니다.
Flux 패턴은 우려 사항을 명확하게 분리하여 코드를 더 쉽게 추론하고 디버깅할 수 있도록 합니다. 또한 애플리케이션을 통해 예측 가능하고 일관된 데이터 흐름을 가능하게 하여 데이터가 항상 최신 상태로 동기화되도록 보장합니다.
Flux 패턴의 장단점
장점
- 일관성 있는 데이터 흐름으로 애플리케이션 상태를 관리할 수 있습니다.
- 각 구성 요소가 분리되어 있어 애플리케이션의 유지 보수와 디버깅이 쉬워집니다.
- 다수의 뷰가 동일한 데이터를 공유하는 경우, 중복 코드를 방지할 수 있습니다.
단점
- 복잡한 애플리케이션에서는 구성요소 간의 관계가 복잡해질 수 있습니다.
- 데이터 흐름이 단방향으로 제한되기 때문에, 데이터 변경에 따라 여러 번 업데이트되는 경우가 있을 수 있습니다.