[React - 상태 관리] Flux Architecture와 Redux

0. Flux Architecture

---

0.1 등장 배경 

단일 컴포넌트 EX 출처 : http://fluxxor.com/what-is-flux.html

- MVC Architecture을 적용한 React에 대해 SSOT를 유지하기 위해 State Lifting + Props Drilling 등을 적용
- 위의 적용 방법으로 인해 아래와 같은 문제점 발생
1) 다량의 컴포넌트가 하나의 상태를 구독하는 경우 - 무조건 해당 상태를 가진 부모 컴포넌트의 자식이여야 함
2) 상태를 사용하려는 자식 컴포넌트가 부모 컴포넌트와 매우 멀리 떨어져있는 경우 - props Drilling 발생
- 이에 대한 해결을 위해 Flux Architecture가 등장 

---

0.2 작동 원리와 구성요소

출처 : http://fluxxor.com/what-is-flux.html

:: 데이터의 흐름을 단방향으로 구성하는 아키텍처

 

출처 : https://zeriong.tistory.com/22

1) Action 발생 -> 2) Dispatcher가 action 관리 및 store로 전달 -> 3) Store는 상태변경 및 해당 상태 전

구성 요소	특징
Action	- 애플리케이션에서 발생하는 이벤트를 정의하는 객체
Dispatcher	- 모든 액션을 centralized(중앙 집중) 방식으로 처리하는 객체 - 액션을 받아 Store에 전달
Store	- 애플리케이션의 상태를 저장하는 객체 - 모든 상태는 Store에서 관리, 변경된 상태는 구독된 컴포넌트에 전달
View	- 상태를 표시/사용하는 컴포넌트

---

0.3 MVC Architecture vs. Flux Architecture

출처 : https://zeriong.tistory.com/22

항목	MVC Architecture	Flux Architecture
상태 위치	Model	Store
상태 흐름	:: 위-아래로 이동 - State Lifting (상위 컴포넌트로 상태 전달) - Props Drilling (하위 컴포넌트로 상태 전달)	:: 수평적 이 - Reducer (Dispatch)  - Store (상태가 한 곳에서 관리)
상태 변경 방식	Controller가 상태 변경	1) Action에 대한 Dispatcher의 활동 2) Dispatcher가 Reducer로 상태 변경
상태 관리 방식	여러 컴포넌트에서 상태를 개별적 관리	store에 중앙 집중식 관리

---

 

 

1. 전역 상태 Context API에 관리가 필요한 이유

---

:: Context API는 전역 상태만 제공할 뿐 이에 대한 관리는 다른 라이브러리를 이용해야 함

:: Context API + useReducer는 "좁은 의미"에서의 상태관리

• 좁은 의미
  1) useReducer를 통해, 상태 전이에 대한 규칙을 정해놓거나
  2) Middleware를 통해 , 상태 전이에 대한 추가 처리 or 분기에 따른 상태 전이

---

 

2. 전역 상태 관리 라이브러리

2.1 Redux

출처 : asac 수업자료

개념	내용	Context API와 비교
Store	:: 전역 상태가 저장되는 중앙 저장소. :: private 필드	:: Contenxt
Provider	:: 관리되는 데이터가 유지되는 블럭	동일
Actions	:: 상태를 변경하기 위해 디스패치하는 객체. :: 보통 객체 형태, type 속성과 관련 데이터 포함 :: Action == Type + payload
Reducers	:: 액션에 의해 상태를 변경하는 함수 :: 이전 상태와 액션을 인자로 받아 새로운 상태를 반환	:: 사용 컴포넌트 내 useState를 사용하여 직접 업데이트
Selector	:: Getter	:: Consumer, useContext
Dispatch	:: 액션을 발송하는 함수 :: 액션을 디스패치하여 상태를 변경하도록 Redux에 지시	:: useReducer or useState
Subscribe	:: 상태 변경을 감지 -> 리렌더링이 발생하도록 하는 함수	:: useContent로 리렌더링 발생

 

- 중요 :: Context API와 다르게 Redux는 immer를 내장하여 관심있는 사항에 대해서만의 상태 변경이 가능(일부 렌더링)

- 중요 :: Redux에서 Reducer에는 오직 "상태변경"만 들어가야 한다. 다른 side-Effect X

---

2.2 ReduxToolkit

:: Redux의 경우 Boilerplate 코드가 많고 설정이 복잡

개념	Toolkit	내용
Store	configureStore	:: 상태 구성 복잡성 해결 :: store 생성 및 여러 미들 웨어 제공
Action->Dispatcher-> Reducer	createSlice	:: 상태 변경 정의(Setter) 복잡성 해결 :: Reducer 및 Action 생성
Selector	useSelector	:: Getter
내장 라이브러리	createAsyncThunk	:: API 호출 처리와 같은 비동기 액션
	createEntityAdapter 등	:: 엔티티 상태 관리 및 CRUD 작업을 쉽게 처리

 

- 같이 읽기 좋은 비교글

Redux-toolkit과 Redux의 차이점

 

Difference Between Redux and Redux Toolkit

 

---

2.3 사용법

0. 설치

npm install react-redux @reduxjs/toolkit

---

1. Slice 생성

// Reducer + Action 설정
// (1) Reducer :: 함수
// (2) Action :: 함수 내 동작 + only 상태만 변경
export const themeSlice = createSlice({
  name: "theme",
  initialState: themeTypes.DARK_THEME,
  reducers: {
    // React 에서의 useReducer 처럼 새로운 상태를 return 하지않고,
    // immer 사용했을때와 동일하게 변경할 상태만 골라서 변경하면되어, 간편하다.
    change: (preState, action) => {
      preState.color = action.payload.color;
      preState.desc = action.payload.desc;
    },

    modify: (previousState, { payload }) => {
      previousState.color = payload.color;
      previousState.desc = payload.desc;
    },
  },
});

---

2. Store 생성

// Reducer(Reducer + InitialState)
export const store = configureStore({
  reducer: {
    // Store 내 (초기) State 뿐만 아니라 상태전이를 위한 Reducer 대입
    theme: themeSlice.reducer,
    // ...
  },
});

---

3. Provider 범위 설정

:: 커스텀 or 그냥 바로 사용 가능

export const ReduxProvider = ({ children }) => {
  return (
    <Provider store={store}>
      {/* 3. Provider 로 전역 상태들을 사용할 범주 설정 */}
      {children}
    </Provider>
  );
};

// 적용
function App() {
  return (
    <ReduxProvider>
      <ThemeText />
      <ThemeDescription />
      <ChangeButton />
    </ReduxProvider>
  );
}

---

2.4 대략적인 디렉터리 구조

src/
│
├── assets/                    # 정적 파일 (이미지, 아이콘 등)
├── components/                # UI 컴포넌트 (상위/하위 컴포넌트)
├── features/                  # 각 기능(Feature)별 상태 관리
│   ├── user/                  # 예: 사용자 관련 상태 (userSlice)
│   │   ├── userSlice.js       
│   │   └── userSelectors.js   
│   │
│   └── product/               # 예: 상품 관련 상태 (productSlice)
│       ├── productSlice.js    
│       └── productSelectors.js
├── app/                       # 애플리케이션의 전역 상태 및 store 설정
│   ├── store.js               # Redux store 설정 (configureStore)
│   └── rootReducer.js         # 여러 slice들을 결합하는 루트 리듀서
│
├── services/                  # 비즈니스 로직, API 호출, 비동기 작업
│   └── api.js                 # Axios 또는 fetch API 설정, 비동기 로직 처리
│
├── utils/                     # 유틸리티 함수들 (예: 포맷팅, 날짜 처리 등)
├── styles/                    # 공통 스타일
├── App.js                     # 애플리케이션의 루트 컴포넌트
└── index.js                   # 애플리케이션의 진입점

---

 

---

깨알 단어 사전

•  Single Source of Truth(SSOT)
  :: 모든 정보나 데이터가 하나의 일관된 위치에만 저장되도록 하는 원칙
  :: 데이터의 일관성, 정확성 유지 및 데이터의 중복 최소화
  
  
• ContextAPI
  ::  React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법
  
  
• useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init?)

 

---

참고

ASAC 수업자료

[ Redux-Toolkit ] 더 간단해진 상태관리 라이브러리

 

useReducer – React

 

Context – React