MVC (Model - View - Controller)
소프트웨어 개발에서 많이 사용되는 소프트웨어 디자인 패턴중 하나로, 애플리케이션의 구성 요소를 세가지 역할로 나누어 관리함으로써 개발의 유지보수성과 확작성을 높이는 모델이다.
Model
- 애플리케이션의 데이터를 관리하는 역할을 담당
- 데이터의 구조와 접근 방식을 정의, 데이터 변경에 따른 로직도 포함
View
- 애플리케이션의 사용자 인터페이스를 담당
- 데이터의를 보여주는 역할을 하며 UI와 데이터의 상호작용도 포함됨.
Controller
- Model과 View 간의 상호작용을 관리하는 역할을 담당함
- 사용자의 입력에 대한 처리와 Model의 데이터 업데이트 등을 수행함.
Flux 패턴
Facebook에서 개발된 소프트웨어 아키텍처 패턴중 하나로, React와 함께 사용하면 어플리케이션의 데이터 흐름을 보다 명확하게 관리할 수 있다.
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
Unlike managing state in a unidirectional way, you can handle the state all in one place if wanted(not recommended.). The way redux is works, is that it manages state in the store, and manipulate state via the reducer which is nothing but a simple function
tkssharma.gitbook.io
props를 이용한 상태관리
Redux, Reducer와 Store를 사용한 상태관리 방식
Redux는 상태를 관리하기 위해 특정 컴포넌트의 상태가 아닌 전역 상태(Store)를 사용한다. 이렇게 함으로 여러 컴포넌트에서 동일한 상태를 공유할 수 있다.
Redux 상태가 변경될 대마다 일정한 방식으로 동작하는 리듀서를 사용하여 상태를 업데이트 한다.
Redux 의 특징
- 예측 가능 (predictable)
- 중앙 관리 (Centralized)
- 디버깅 용이 (Debuggable)
- 유연한 확장성 (Flexible)
Redux는 React 뿐만 아니라 Angular, Vue등 다른 프레임워크에서도 사용될 수 있으며, 미들웨어를 활용하여 비동기 작업 처리 및 상태 변화 로깅등 다양한 기능을 추가할 수 있다.
'Front-End > React' 카테고리의 다른 글
| sort를 이용한 게시글 인기순 정렬 (목록까지 정렬되는 오류 수정) (0) | 2023.03.20 |
|---|---|
| [useEffect] React 컴포넌트 리랜더링 시키는방법 (게시글 아이템 불러오기) (0) | 2023.03.17 |
| Hook이란? ( useState, useEffect, useContext ) (0) | 2023.02.27 |
| CRA 와 VITE (0) | 2023.02.25 |
| ECMAScript, 바벨(Babel) (0) | 2023.02.15 |
