우아한 테코톡(4), Flux Architecture

본 포스팅은 우아한Tech의 테코톡 우디님의 Flux Architecture 영상을 정리한 내용입니다.

Flux Architecture의 컨셉과 개념, 과정을 위주로 정리했습니다.

개인적으로 굉장히 잘 설명된 영상이라 생각합니다.

---

Flux Architecture

---

1. Flux가 왜 필요할까?

1) Flux란?

단방향 데이터 흐름을 통해 예측가능하게 상태를 관리할 수 있는 클라이언트사이드 웹 어플리케이션 아키텍쳐

---

 

2) 웹 어플리케이션의 흐름

과거 웹 어플리케이션은 문서 열람에 그쳤지만 자바스크립트를 통한 동적인 상태 조정이 가능해짐에 따라 코드의 복잡성이 증가하고 유지보수가 어렵게 됐다. 이를 위해 디자인 패턴과 프레임워크가 등장했다.

---

2. MVC의 한계

1) MVC란?

Model, View, Controller로 나눠 효율적으로 관리하는 아키텍쳐

---

cf) 이와 관련해 이전 포스팅을 참고할 수 있다. 

2022.07.04 - [간단한 컴퓨터 이론/우아한테코톡] - 우아한테코톡 (1), MVC

우아한테코톡 (1), MVC

2022.07.08 - [간단한 컴퓨터 이론/우아한테코톡] - 우아한테코톡 (2), Servlet & Spring Web MVC

우아한테코톡 (2), Servlet & Spring Web MVC

2022.04.25 - [강의 내용 정리/소프트웨어 공학] - 소프트웨어 공학 (8), Architectural Design

소프트웨어 공학 (8), Architectural Design

 

 

2) MVC 패턴의 단점

- 양방향 데이터 흐름인 경우 MVC는 확장하기 어렵다는 단점이 있다. 

- Model이 View를 업데이트하고, Controller는 Model이나 View를 업데이트한다. 양방향인 경우에는 View가 Model을 조정하기도 한다. 하지만 실제 어플리케이션은 매우 복잡하고 흐름을 파악하기 어려워진다.

---

 

3. MVC에서 Flux로

1) Flux 아키텍처

- Dispatcher를 거쳐 한방향으로 사이클이 흐르는 것을 확인할 수 있다.

 

2) Flux 아키텍처를 사용한 SNS 메세지 예시

- 탭이나 메인 메시지 뷰를 통해 읽은 메세지는 읽지 않은 스레드들로 읽었다는 정보를 보내 읽지 않음 카운터를 조금 더 효율적으로 처리할 수 있다.  

 

3) 추상화한 Flux 아키텍처

- 하지만 위의 경우 전달받은 액션을 어떤 어플리케이션 상태에 보내야할지 알 수 없기에 액션 허브를 두어 적절하게 이를 전달할 수 있도록 한다.

 

액션 허브를 두어 상태에게 전달한다.

 

 

---

4. Flux의 핵심 컨셉과 개념

1) Action

상태 변경 요청을 담은 자바스크립트 객체

---

- 액션 이름(type)

- 데이터(payload)

- Action 생성자

cf) action을 쉽게 만들어주는 도우미 

2) Dispatcher

모든 데이터 변경 요청이 경유하는 중앙 허브

---

- View로부터 Action을 받아 모든 Store에게 전송

- 내부에 상태 변경 로직이 존재하지 않는다.

- Store간 의존성 관리를 해주기에 Store A의 상태 변경 순서를 Store B 다음으로 미룰 수 있다.

 

 

3) Store

어플리케이션 상태 및 로직 컨테이너

---

- Dispatcher에서 전달된 Action을 통해서만 상태 변경

- 상태가 변경되면 View에게 통지한다.

 

 

4) View

상태에 따라 화면을 출력하는 로봇

---

- Controller-View(React)라고도 불리며 Store의 상태 변경을 수신하고 상태에 따라 View를 새로 랜더링한다.

- Dispatcher에게 Action을 전달해 상태변경을 요청할 수 있다.

---

 

5. Flux의 장점과 한계점

1) 장점

(1) 데이터 흐름의 구조화

코드의 흐름을 파악하기 쉬워 기능확장 및 유지보수가 쉬워진다.

 

(2) 쉬운 유닛 테스트

외부의 영향을 받지 않아 상태관리가 쉽다.

 

 

2) 한계점

(1) 높은 학습 곡선

(2) 장황한 문법

작은 기능을 위해 많은 코드가 필요하다.

 

 

---

출처

 

https://www.youtube.com/watch?v=wQFBgKl1PYw