(MVC, Flux, Redux) 애플리케이션 상태관리

---

MVC (Model - View - Controller)

소프트웨어 개발에서 많이 사용되는 소프트웨어 디자인 패턴중 하나로, 애플리케이션의 구성 요소를 세가지 역할로 나누어 관리함으로써 개발의 유지보수성과 확작성을 높이는 모델이다.

 

MVC 모델

Model

• 애플리케이션의 데이터를 관리하는 역할을 담당
• 데이터의 구조와 접근 방식을 정의, 데이터 변경에 따른 로직도 포함

 

View

• 애플리케이션의 사용자 인터페이스를 담당
• 데이터의를 보여주는 역할을 하며 UI와 데이터의 상호작용도 포함됨.

 

Controller

• Model과 View 간의 상호작용을 관리하는 역할을 담당함
• 사용자의 입력에 대한 처리와 Model의 데이터 업데이트 등을 수행함.

 

 

 

 

 

---

Flux 패턴

Facebook에서 개발된 소프트웨어 아키텍처 패턴중 하나로, React와 함께 사용하면 어플리케이션의 데이터 흐름을 보다 명확하게 관리할 수 있다.

flux패턴

Action

• 어플리케이션에서 일어나는 모든 이벤트를 나타냄
• 객체형태로 정의되며, type 속성으로 어떤 이벤트인지 식별함.

 

Dispatcher

• Actions를 받아 Store에 전달하는 역할을 함.
• Dispatcher는 단 하나만 존재하며 Store들의 데이터 업데이트가 겹치지 않도록 관리

 

Store

• 어플리케이션의 데이터를 저장하고 관리함.
• Store는 Dispatcher로부터 Actions를 받아 데이터를 업데이트하고, View 에게 변경된 데이터를 알려줌

 

View

• 사용자의 인터페이스를 나타냄
• Store의 데이터를 바탕으로 UI를 업데이트하고, 사용자의 이벤트를 Actions로 전달함. 

 

 

 

 

---

Redux

React.js와 같은 라이브러리에서 사용되는 예측 가능한 상태(state) 컨테이너 및 상태 관리 라이브러리이다.

 

React의 단방향 데이터 흐름 아키텍처와 Flux 패턴을 따르며, 애플리케이션 상태를 관리하는 중앙 집중식 저장소를 제공한다.

 

Redux는 Flux 아키텍처의 기본 철학을 계승하지만, Flux를 실용적으로 사용 가능할 수 있도록 설계되었다.

 

Flux의 개념을 발전시킨 기능에 핫 리로딩, 타임 트래버 디버깅과 같은 기능을 제공한다.

 

• 핫 리로딩(Hot Reloading) - 애플리케이션 코드 변경사항이 즉시 적용되도록 하는 개발도구

 

• 타임 트래블 디버깅(Time Travel Debugging) - 디버깅 과정에서 시간 여행을 하듯이 이전 단계의 상태를 탐색하고 분석할 수 있는 기능

 

 

https://tkssharma.gitbook.io/react-training/day-01/react-js-3-principles/one-way-data-flow

One Way Data Flow - React Training

 

 

props를 이용한 상태관리

Redux, Reducer와 Store를 사용한 상태관리 방식

출처 :https://tkssharma.gitbook.io/react-training/

 

Redux는 상태를 관리하기 위해 특정 컴포넌트의 상태가 아닌 전역 상태(Store)를 사용한다. 이렇게 함으로 여러 컴포넌트에서 동일한 상태를 공유할 수 있다. 

 

Redux 상태가 변경될 대마다 일정한 방식으로 동작하는 리듀서를 사용하여 상태를 업데이트 한다.

 

 

Redux 의 특징

• 예측 가능 (predictable)
• 중앙 관리 (Centralized)
• 디버깅 용이 (Debuggable)
• 유연한 확장성 (Flexible)

 

 

 

Redux는 React 뿐만 아니라 Angular, Vue등 다른 프레임워크에서도 사용될 수 있으며, 미들웨어를 활용하여 비동기 작업 처리 및 상태 변화 로깅등 다양한 기능을 추가할 수 있다.