Flux Pattern

besensible·2021년 12월 30일
0

React로 프로젝트를 하다보면 Redux를 써야하는 상황이 온다. 배경 지식이 부족한 상태에서 바로 React와 Redux를 사용하다보니 나도 모르게 Flux패턴을 사용하고 있었더라? 😯

구글링을 하면서 수 많은 사이트, 블로그를 봤는데 그 들이 공통적으로 제시하고 있는 이유는 Flux패턴은 페이스북에서 고안해 냈다.

facebook과 react

내가 이해한 바로는 react의 데이터 흐름과 관련이 있다. 리액트의 경우 데이터의 흐름이 단방향으로 흐르고 있다. 상위 컴포넌트(부모)는 하위 컴포넌트(자식)에게 props로 데이터를 내려준다. 그런데 하위 컴포넌트에서 데이터에 대한 어떤 변경 사항이 생겼을 때 상위 컴포넌트는 그 변경 사항을 알지 못한다.🥲 왜? 리액트의 데이터 흐름은 단방향이니까.

flux를 등장케 한 버그

여러 블로그에 나오고 있는 flux의 등장 배경은 페이스북의 알림 버그였다. 메시지 알림이 떠 있어 들어가서 메시지를 읽으면 그 알림이 없어져야 하는데, 그 알림은 없어지지 않았다. 왜냐하면 데이터 흐름이 단방향이니까! 데이터가 양방향으로 흐르지 않기 때문에 이러한 이슈가 생긴 것. 그래서 페이스북은 flux패턴을 고안해 냈다. 그렇다면 flux패턴은 양방향인가? 아니다. 역시 단방향!

이렇듯, 리액트의 데이터 흐름을 유지하면서 업데이트 된 데이터의 정보를 영향 받는 모든 컴포넌트에 적용시키기 위해 flux패턴이 등장하면서 redux를 쓰게 된 것이다!

Action이 발생 > Dispatcher로 전달 > Dispatcher는 전달된 Action을 보고 등록된 Callback 함수를 실행 > Store에 전달

Store에 저장된 모든 데이터는 View, 즉 ViewController에게 전달된다. ViewController는 자식 View로 변경된 데이터를 전달해주는 Controller의 역할도 함께 한다. :-)

😯 애플리케이션의 모든 상태 변경은 Store에 의해 결정된다.

참고

Flux로의 카툰 안내서

profile
많고 많은 사람 중에 그대 한 사람

0개의 댓글