[2021.08.26] Redux

📌 Data Binding

• 뷰(화면)과 모델(데이터)을 연결하는 것을 의미
• 리액트는 단방향 Data Binding : 값이 바뀔때마다 모델에서 뷰로 가는 흐름

---

📌 MVC Pattern

• 관심사의 분리(separation of concern, SoC)에서부터 나온 패턴
  ➡ 관심사 분리로 코드의 단순화 및 유지보수의 더 높은 수준의 자유가 생긴다.
  ➡ 관심사가 잘 분리될 때 독립적인 개발과 업그레이드 외에도 모듈 재사용을 위한 더 높은 정도의 자유가 있다.

💡 Model

• 데이터
• .json 또는 데이터 모델 정의
• 일반적으로 데이터를 처리하는 로직과 함께!

💡 View

• 화면, html, 레아아웃

💡 Controller

• 이벤트 핸들러와 이벤트를 처리하는 로직이 있는 곳
• 데이터랑 뷰를 이어주는 역할
• 이벤트가 발생(요청)하면 모델에 적정한 로직을 실행하도록 한다.

[MVC 패턴 단점]

• 프로젝트 규모가 커질수록 빠르게 복잡해진다.
• feature 추가될 때마다 모델과 뷰를 연결하는 복잡성이 증가한다.
• 데이터 간의 의존성과 연쇄적인 갱신은 뒤얽힌 데이터 흐름을 만들고 예측할 수 없는 결과로 이끌게 된다.
• 새로온 개발자가 합류하면, 너무 복잡해서 코드만 보고 해석조차 불가능. (유지비용 증가)
• 복잡성이 증가할 수록 예측 불가능해지고 안정성이 떨어진다.
  ➡ 어디서 버그가 터져나올지 테스트도 어렵다.

---

📌 Flux Pattern

• Flux는 Facebook에서 소개한 아키텍쳐
• 전통적인 MVC 패턴을 버리고, 개발이 오래되고 커져도 유지보수가 쉽고 reliable하고 high performance를 유지하는 새로운 패턴
• Redux는 Flux 패턴에 기반한 라이브러리!

• 단방향 데이터 흐름(unidirectional data flow)이 핵심
• 사용자에 의해 Action이 발행 ➡ 해당 Action에 영향이 있는 모든 View가 갱신(rerender)
• 어디에서 어떤 일이 일어날지 알 수 있다(=예상가능하다. 복잡하지 않다). 흐름은 하나니까!!
• Flux는 세 가지 부분으로 구성 되어 있다.
  1. Dispatcher
  2. Stores
  3. Views(리액트 컴포넌트)

💡 Dispatcher

• dispatcher를 통해 action을 발행한다.
• 모든 데이터는 중앙 허브인 dispatcher를 통해 흐른다.

💡 Store

• 어플리케이션의 데이터와 비지니스 로직을 가지고 있는 store

💡 Views

• action이 발행되면 이 action에 영향이 있는 모든 view가 갱신됨

---

📌 Redux Intro

➡ Redux는 Flux 패턴을 근본으로한 라이브러리이다.

💡 왜 리덕스를 사용하는가?

• 앱에서 전체적으로 사용할 데이터 관리가 필요

  • React.js는 단순 UI 라이브러리라서, 데이터 관리를 고려하고 있지 않음
  • 로컬스토리지에 데이터를 저장하고 불러오는 로직 대신 Redux를 사용!
  • props drilling을 피할 수 있다.

• 하나의 state(데이터)를 여러 컴포넌트에서 필요한 경우가 있다.

• 페이지의 레이아웃에 영향 받지 않는 modal, toast, alert 같은 전역 UI 컴포넌트의 상태 관리도 필요하다.

---

💡 리덕스 구조

1. store : Application 전체 state는 store에서 관리된다.
   ➡ store는 redux의 상태값(state)를 갖는 객체다
   

2. action : action은 state 변화를 일으킬 수 있는 행동 정보

3. dispatcher : action이 일어나면 Dispatcher를 통해서 store의 state가 업데이트 된다.

4. view : state가 변경되면 view에서 감지하고, 화면에 반영(rerender)된다.

---

💡 리덕스의 세 가지 원칙

1. 전체 상태값이 하나의 객체로 표현된다.
   ➡ store는 하나다!

2. 상태값(state)은 읽기 전용이다.
   ➡ useState처럼 state값을 직접 바꾸는게 아니고, setState 함수를 사용해서 변경한다.

3. 상태값(state)은 순수 함수에 의해서만 변경되어야 한다.
   ➡ 상태값을 변경시키려면 상태값을 변경하는 함수가 필요하다. (➡ 이 함수가 reducer!)
   reducer는 항상 같은 input은 같은 output을 반환하는 순수함수여야 한다.

---

📌 Redux 사용 | Reducer Store Action

💡 Redux 구성 요소 - Action

사용자의 입력이나 UI 조작, 웹 요청 완료같이 어떠한 상태 변화를 일으킬 수 있는 현상.
즉, 어떤 조작인지 정보를 갖고 있는 자바스크립트 객체이다.

* Action의 생김새 => 자바스크립트 객체다!

{
    type: 'SHOW_MODAL'
}

* Action의 특징

• action은 객체다!
• action은 반드시 type 프로퍼티가 있어야 한다.
• type 이외의 다른 프로퍼티를 가져도 된다.(부가적인 데이터 전달하고 싶을 때)

* Action 정의

• action은 객체 리터럴로 바로 정의하는게 아니라, Action Creator를 통해 만든다

function showModal({ title }) {
	return { type: 'SHOW_MODAL', title }
}

showModal({ title: '로그인' });

---

💡 Redux 구성 요소 - Reducer

reducer는 action이 발생했을 때, state를 변화시키기 위한 함수다.

* Reducer의 생김새

reducer는 현재의 state와 action을 인자로 받고,
이 action의 내용(type)에 따라 state를 변화시킨다.

function modal(state, action) {

  switch(action.type) {
    case 'SHOW_MODAL':
      return {
        ...state,
        showModal: true
      };
    case 'CLOSE_MODAL':
      return {
        ...state,
        showModal: false
      };
    default:
      return state;
  }
}

---

💡 Redux 구성 요소 - Store

store는 앱에 오직 하나만 있고, 이 유일한 store를 사용하여 app의 전체 상태를 관리 한다.

import { createStore } from 'redux'
import modalReducer from './ModalReducer';

const store = createStore(modalReducer);