Flux architecture
Flux란?
- 애플리케이션에 데이터를 취급하기 위한 패턴.
- Flux와 React는 함께 사용할 수도, 독립적으로 사용할 수도 있다. 둘 다 Facebook이 가진 특정 문제점들을 해결하기 위해서 개발됐다.
연원
- Facebook은 ‘읽지 않은 메세지’에 메세지가 오지 않았는데도 알림이 뜨는 문제를 겪고 있었다. 이를 고치기 위해 데이터가 흐르는 방법에 문제가 있음을 파악했다.
- 이전에는 데이터를 가지고 있는 model이 rendering을 하기 위해 view layer로 데이터를 보냈다.
- 사용자와의 상호작용이 view를 통해서 일어났기 때문에, 사용자의 입력에 따라 view가 가끔씩 모델을 업데이트해야 할 필요가 있었고, 이런 변경들은 비동기적으로 생길 숫 있어 디버그하기 힘든 데이터 흐름을 가졌었다.
탄생
- Facebook은 데이터가 단방향으로 흐르고, 새로운 데이터를 넣으면 처음부터 흐름이 다시 시작되는 Flux아키텍쳐를 만들게 되었다.
구조
- 액션 생성자 the action creator
- 모든 변경사항과 사용자의 상호작용이 거쳐가야하는 액션의 생성 담당
- 애플리케이션의 상태를 변경하거나 뷰를 업데이트하고 싶다면 액션을 생성해야한다. header에는
- 무슨 메세지를 보낼지 알려주면 액션 생성자는 나머지 시스템이 이해할 수 있는 포맷으로 바꿔준다.
- type과 payload를 포함한 액션을 생성한다.
- 액션 생성자가 액션 메세지를 생성한 뒤 디스패쳐로 넘겨준다.
- 디스패쳐 dispatcher
- 기본적으로 callback이 등록되어있는 곳이다.
- 액션을 보낼 필요가 있는 모든 스토어를 가지고 있고, 액션 생성자에게서 액션이 넘어오면 여러 스토어에 액션을 보낸다.
- 처리가 동기적으로 실행되어서, 스토어들 사이에 의존성이 있어서 하나를 다른 하나보다 먼저 업데이트를 해야 하면, 디스패쳐가 waitFor()를 사용해서 처리할 수 있다.
- 스토어 store
- 애플리케이션 내의 모든 상태와 그와 관련된 로직을 가지고 있다.
- 스토어가 특정 액션을 구독하지 않고 모든 액션을 일단 받은 뒤 처리할지 말지를 결정(switch statement)한다.
- 모든 상태 변경은 반드시 스토어에 의해서 결정되어야 하고, 상태 변경을 위한 요청을 스토어에 직접 보낼 순 없다. 무조건 액션-디스패쳐를 거쳐서 액션을 보낸 다는 뜻이다.
- 스토어에 상태 변경을 완료하고 나면, 변경 이벤트를 보낸다. 컨트롤러 뷰에 상태가 변경했다는 것을 알려준다.
- 컨트롤러 뷰 controller view 와 뷰 view
- 상태를 가져오고, 유저에게 보여줄/입력을 받을 화면을 렌더링한다.
- 컨트롤러 뷰는 스토어와 뷰 사이의 중간관리자 같은 역할이다. 스토어가 전달한 상태변경을 컨트롤러 뷰가 받아서 자신의 아래에 있는 모든 뷰에게 새로운 상태를 넘긴다.
더 자세한 내용은
Flux 알아보기
