플럭스(Flux) 패턴

 

 

플럭스(Flux) 패턴

 

정의

리액트 어플리케이션의 데이터 흐름을 관리하기 위한 디자인 패턴이다. 이 패턴은 옵저버 패턴을 약간 수정한 것으로, 한 객체의 상태 변경이 다른 모든 객체에 알림을 주고 이를 구독해서 확인하는 일련의 메커니즘을 의미한다.

플럭스란, 애플리케이션에서 단방향 데이터 흐름을 관리하는 패턴으로 전통적인 MVC 패턴을 대체한다. "데이터를 어떻게 흘릴 것인가"에 대한 구조적 아이디어이다. 프레임워크나 라이브러리가 아니라 클라이언트 사이드 웹 애플리케이션의 상태 관리 복잡성을 해결하기 위한 새로운 종류의 아키텍처다. 

 

 

데이터 흐름

플럭스 데이터 흐름 다이어그램

 

플럭스의 데이터 흐름에는 액션, 디스패처, 스토어, 뷰가 있다.

1) 액션: 데이터 흐름을 트리거하는 디스패처로 보내지는 자바스크립트 객체를 의미

2) 디스패처: 스토어를 업데이트하기 위한 콜백을 위한 싱글턴 레지스트리로, 플럭스 애플리케이션 내의 데이터 흐름의 중앙 허브 역할을 담당한다. 디스패처는 실제로 별도 로직이 존재하지 않고 단순히 액션에서 스토어로 페이로만 전달하는 역할이다.

3) 스토어: 애플리케이션 상태와 로직을 보관하는 곳이다.

4) 뷰: 스토어로부터 데이터를 받아 애플리케이션을 다시 렌더링한다. 뷰는 사용자 상호 작용에 따른 액션을 트리거하기도 한다.

 

 

장점

1. 단방향 데이터 흐름으로 인해 이해하기가 쉽다.

2. 플럭스 컴포넌트는 서로 분리되어 각 컴포넌트가 자체적인 책임을 지닌다.

3. 프레임워크나 라이브러리가 아닌 오픈소스 아키텍처다. (=설계 철학이나 패턴에 가깝다)

4. 설계로 인해 발생하는 런타임 오류가 감소한다.

5. 유지보수가 용이하다.

 

 

플럭스 아키텍처 기반 라이브러리

Redux, Recoil, Zustand