Flux 패턴이란?

최근 1차 면접에서 받았던 질문이 있었다.

 

Flux 패턴에 대해서 아시나요?

들어 본 것 같지만, 개념에 대해서 잘 몰랐기 때문에 솔직하게 모른다고 답변했다.

 

면접이 끝난 후, 질문들을 정리하던 와중에 궁금증이 들어 검색을 해보니

모르면 안됐다.

 

리덕스를 사용해 본 사람으로서

Flux 패턴에 대해서 인지하지 못하고 있었던 사실이 너무 부끄러웠고, 이를 기억하기 위해

관련 개념을 기록해보고자 한다.

 

등장 배경

기존 애플리케이션은 MVC (Mode, View, Controller) 패턴을 보편적으로 사용하였다.

Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)하는 패턴이다.

이 때, 데이터가 변경 시 Model에서 View로 전달이 되고, View를 통해 데이터 입력 시 View에서 Model로 전달되어, 데이터가 양방향으로 흐르는 것을 볼 수 있다.

 

문제는, 애플리케이션의 규모가 커진다면 다양한 Model과 View가 서로 상호작용을 하면서

복잡한 흐름을 만들게 되고 결과를 예측하기 어렵게 된다. 이에 따라 Flux 패턴이 등장했다.

 

 

 

Flux 패턴

Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처이다. 

Action 

액션 생성자는 타입(type)과 페이로드(payload)를 포함한 액션을 생성한다.

type은 액션 상수에 해당하고 payload는 액션을 통해 전송하고자 하는 데이터를 의미한다.

 

dispatcher

Dispatcher는 콜백 함수로 액션 메세지를 Store에 전달하는 역할을 한다.

Store의 데이터를 조작하는 것은 오직 Dispatcher를 통해서만 가능하며,

Store들 사이에 의존성이 있는 상황에서도 순서에 맞게 콜백 함수를 처리하고 관리한다.

 

Store(Model)

모든 상태변경이 이루어지는 곳이다.

어떤 타입의 Action이 발생했는지에 따라 그에 맞는 데이터 변경을 수행하는 콜백 함수를 Dispatcher에 등록한다.

Dispatcher에서 콜백 함수를 실행하여 상태가 변경되면 View에게 데이터가 변경되었음을 알린다.

 

View

뷰는 상태를 유저에게 보여주고 입력받을 화면을 렌더링하는 역할을 맡는다.

컨트롤러 뷰(최상위 뷰)는 스토어에서 변경된 데이터를 가져와 모든 자식 뷰에게 분배한다.

데이터를 받은 자식 뷰는 화면을 새롭게 렌더링한다.

 

Redux

리덕스는 FLUX 패턴을 따르고 있지만 FLUX 패턴을 그대로 구현하지는 않았다. 리덕스에는 디스패처 개념이 없다. 리듀서가 디스패처와 스토어의 기능을 모두 담당하고 있다.

참고자료

https://velog.io/@kina/FLUX-%ED%8C%A8%ED%84%B4

https://code-cartoons.com/articles/a-cartoon-guide-to-flux/