리덕스

최근에 많이 사용하는 전역 상태 관리 방식은 Recoil입니다.
- 리덕스에서는 비동기 처리를 위해서는 Redux Thunk나 Redux Saga와 같은 미들웨어를 사용해야 했는데 recoil은 비동기 처리를 기반으로 작성되었기 때문에 바로 활용할 수가 있습니다.
하지만 기존 사용자가 많은 것은 Redux입니다.
- 기존 사용자가 많은 경우 사용자 커뮤니티가 잘 구축되어 있기 때문에 유지 보수가 편리하며 문제 발생 시 더 도움을 받기 쉽습니다.

1. Data Binding

이전의 데이터 관리에는 mvc패턴을 사용했었는데 문제가 생겨서 flux패턴을 사용하게 되었습니다.
jQuery나 DOM API로 데이터를 보여주려면 직접 js에 접근해서 코드까지 수정해야 했습니다.

$('p').text(unreadCount);

1. 1. 단방향

React가 단방향입니다.
SetState → State → view로 한 방향으로 갑니다.

1. 2. 양방향

Vue가 양방향입니다.
쓰면 쓰는 그 순간에 state까지 다 바뀝니다.
https://v2.vuejs.org/v2/guide/forms.html?redirect=true

2. MVC Pattern

리덕스가 나온 이유는 MVC 패턴이 불편해서 나온 것입니다.
MVC 패턴은 이렇습니다.Action → Controller → Model ↔ View
Model
- 데이터입니다.
View
- 화면, html, layout입니다.
Controller
- EventHandler와 Event를 처리하는 로직이 있는 곳입니다.
- 데이터와 View를 이어주는 역할을 합니다.
- 이벤트가 오면 적절한 로직이 실행되도록 합니다.

2. 1. 너무 많이 쓰일 때 이런 문제가 생겼습니다.

Controller
- →Model
- →Model
- →Model
- →Model
규모가 커지니까 너무 복잡해졌습니다.
새로운 개발자가 합류했을 때 코드 이해가 어렵게 되었습니다.

3. Flux 패턴

단방향 데이터 흐름이 핵심입니다.
다음과 같습니다.

Action -> Dispatcher -> Store -> View

리덕스에서 사용하는 용어들이 여기에 다 들어있습니다.
Action이 발행되면 해당 Action에 영향이 있는 모든 View가 갱신(rerender)됩니다. 흐름이 단방향이기 때문에 어디에서 어떤 일이 일어나는지 알 수 있습니다.
Dispatcher
- 이것을 통해 action을 발행합니다.
Store
- 데이터와 비즈니스 로직을 가지고 있는 저장소입니다.
View
- 보여지는 화면입니다.

4. 리덕스(Redux) Intro

4. 1. 왜 사용할까요?

Props가 위 컴포넌트에서 아래 컴포넌트로 받아서 계속 내려 보내야 하는데, 이 과정이 너무 불편하기 때문에 사용합니다.
데이터를 저장할 때 LocalStroage를 사용합니다. 그런데 LocalStroage는 말 그대로 로컬에 저장되기 때문에 사용자가 데이터에 접근할 수 있는 상태가 됩니다. 하지만 Redux에 상태가 저장되어 있다면 사용자가 볼 수 없기 때문에 보안성이 더 크다고 볼 수 있습니다.
Redux로 상태 관리를 하기 좋은 것들은 다음과 같습니다.
- Dark Mode, 로그인 정보, 언어 설정
- 이런 것들은 전역에서 상태를 관리하고 있는 것들이기 때문에 리덕스를 사용하면 좋습니다.

4. 2. Redux

	     ------Action ------
             ↓		        ↑	                 
Action -> Dispatch -> Store -> View

Store: 전체가 관리되는 공간
Action : State변화를 일으킬 수 있는 현상등이라고 생각할 수 있습니다. 행동 정보를 가지고 있습니다.
Dispatcher : Action이 일어나면 Dispatcher가 state를 업데이트시킵니다.
View: state가 변경되면 View에서 감지하고 화면에 반영합니다. (Rerender)
즉, 한 방향으로 진행됩니다.

4. 3. Redux의 세 가지 원칙

전체 상태값이 하나의 객체로 표현됩니다.
- React App의 store는 단 하나입니다!
상태값(state)은 읽기 전용입니다.
- setState처럼 Redux에서 state관리하는 것입니다.
상태값(state)은 순수 함수에 의해서만 변경되어야 합니다.
- state의 값을 바꾸는 함수가 필요합니다.
- 그 함수를 reducer라고합니다.
- 이 함수는 순수함수(pure fuction)이어야 합니다.
  - 순수함수란 Input은 항상 같은 Output을 반환하는 함수입니다.
  - ex) a + b ⇒ (a+b)
  - random(), New date(), fetch → 이런 것들은 순수함수가 아닙니다.

5. Redux 사용

5.1. 언제 사용하나요?

모달
- 모달 창은 클릭하면 열고 아니면 닫고 이런 코드가 있겠죠?
- 상태(state)는 showModal 이 불리언(boolean)으로 되어 있을 것입니다.
- true가 되면 모달이 열릴 것입니다.
- portal이라는 것이 있습니다.
  - 모달이 열릴 곳을 미리 만들어 놓는 것입니다.

5.2. Action

5.2.1. Action의 생김새

{
	type: 'SHOW_MODAL'
}

5.2.2. Action의 특징

액션은 객체입니다.
액션은 반드시 ‘type’ 프로퍼티가 있어야 합니다.
일반적으로 type은 어떤 행동을 설명하는 문자열입니다. (조작하고 싶은 내용)
type 이외에 다른 프로퍼티를 가져도 되는데 주로 부가적인 데이터를 전달하고 싶을 때 사용합니다.

5.2.3. Action의 정의

react 프로젝트에서 사용할 action은 객체 리터럴로 바로 정의하는 것이 아니라, action을 만들어주는 함수를 통해 만듭니다. 이러한 함수를 Action Creator(액션 생성자)라고 합니다.

// showModal이 Action 생성자
function showModal() {
	return { type: 'SHOW_MODAL'}  // <- Action!
}

Action은 일반적으로 '행동 정보'인 type만 갖고 있지는 않고, 부가적인 정보를 포함하고 있습니다.

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

view에서 액션이 발생되므로, 이때 view에 따라 다양한 추가적인 정보를 넘기게 됩니다.

action 생성은 이렇게 showModal 함수를 호출하면 됩니다.

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

5.3.1. Reducer의 형태

(state, action) => nextState

5.3.2. Reducer의 정의

function modal(state, action) {

  switch(action.type) {
    case 'SHOW_MODAL':   // SHOW_MODAL 이라는 action이 발행되면
      return {
        ...state, // state 객체 중에서 이전에 있는 값들을 같이 불러와서 보내야 하기 때문에 ...state를 사용했습니다.
        showModal: true  // 전역 state 중에서 showModal의 값을 true로 바꿉니다.
      };
    case 'CLOSE_MODAL':
      return {
        ...state,
        showModal: false
      };
    default:
      return state;
  }

}

5.4. Store

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

const **store** = createStore(modalReducer);

redux에서 제공하는 createStore 함수 생성
store를 생성할 때 reducer를 인자로 전달

5.5. 기타

폴더 구조는 redux - store 로 만든 경우도 있고
store를 바로 넣는 경우도 있습니다.

♧ 이 내용은 원티드, 위코드 프리온보딩 코스 강의를 들으면서 정리한 내용입니다.

원티드, 위코드 FE 프리온보딩 – 네 번째 수업 (Redux)

리덕스