CS 공부

# Flux 패턴

박태정 입니다. 2025. 2. 20. 22:55
반응형

🚀 Flux 패턴: 단방향 데이터 흐름이 답일까?

MVC 패턴이 익숙하긴 한데, 점점 규모가 커지는 애플리케이션에서 복잡성이 너무 올라가는 문제가 있다고한다. 이러한 문제점을 해결해준 것이 Flux 패턴이라고 한다. 🤔

🎯 Flux 패턴이란?

Flux 패턴은 단방향으로 데이터 흐름을 관리하는 디자인 패턴이다.
이 패턴은 Facebook(Meta)에서 개발했는데, 페이스북 메신저에서 알림 카운트를 관리하는 과정에서 기존의 MVC 패턴이 한계를 드러내면서 등장하게 되었다.

예를 들어, 메시지가 몇 개 왔는지를 저장하는 markSeen이라는 변수가 있었는데, MVC 구조에서는 모델과 뷰 간의 관계가 너무 복잡해졌다.
데이터 흐름이 엉키다 보니 markSeen이 제대로 동작하지 않는 문제가 발생했고, 이를 해결하고자 Flux 패턴이 고안되었다.

⚙️ Flux의 핵심 구조

Flux의 구조는 의외로 간단하다. MVC와 비교하면 데이터 흐름이 한 방향으로만 흐르기 때문이다.

  • Action 🏃‍♂️: 어떤 이벤트가 발생했음을 알리는 역할
  • Dispatcher 🚦: 액션을 받아서 필요한 곳으로 전달
  • Store 📦: 상태(state)를 저장하고 관리하는 곳
  • View 👀: 사용자가 실제로 보는 UI

데이터 흐름은 다음과 같다.
1️⃣ 사용자가 어떤 이벤트를 발생시킴 (예: 버튼 클릭)
2️⃣ Action이 생성됨
3️⃣ Dispatcher가 Action을 받아 적절한 Store로 전달
4️⃣ Store가 상태를 업데이트
5️⃣ View가 Store의 데이터를 반영하여 UI를 갱신

🔄 MVC와의 차이점

기존의 MVC 패턴에서는 모델과 뷰가 양방향 관계였다.
즉, 모델이 변경되면 뷰도 변경되고, 뷰가 변경되면 모델도 바뀌는 복잡한 구조였다.

반면 Flux 패턴은 단방향 흐름을 강제한다.
➡️ 데이터가 한 방향으로만 흐르기 때문에 일관성이 유지되고,
➡️ 상태가 예측 가능해지면서 디버깅이 쉬워지는 장점이 생겼다.

🛠 Redux와 Flux

Flux 패턴을 기반으로 한 대표적인 라이브러리가 바로 Redux다.
Redux는 Flux에서 Dispatcher를 없애고 Store를 하나로 통합하는 방식을 사용한다.
그러니까 Flux에서 더 단순화된 버전이라고 볼 수도 있을 것 같다.

🤔 디자인 패턴을 배우는 이유?

디자인 패턴을 공부하다 보면 프레임워크에 대해서 이해하기 더욱 쉬워질 것 같다.
Redux 같은 라이브러리도 결국 Flux 패턴을 기반으로 만들어졌다고하고,
프레임워크의 설계를 이해하면 더 효과적으로 사용할 수 있을 거라고 생각한다.

반응형