Redux

리덕스

장점

• 컴포넌트 코드로 부터 상태 관리 코드를 분리할 수 있다.
• 서버 렌더링 시 데이터 전달이 간편하다.
• 로컬 스토리지에 데이터를 저장하고 불러오는 코드를 쉽게 작성할 수 있다.
• 같은 상탯값을 다수의 컴포넌트에서 필요로 할 때 좋다.
• 부모 컴포넌트에서 깊은 곳에서 있는 자식 컴포넌트에 상탯값을 전달 할 때 좋다
• 알림창과 같은 전역 컴포넌트의 상탯값을 관리할 때 좋다.
• 페이지가 전환되어도 데이터는 살아 있어야 할 때 좋다.

원칙

• 전체 상탯값을 하나의 객체에 저장한다
• 상탯값은 불변 객체다
• 상탯값은 순수 함수에 의해서만 변경되어야 한다.

구성

• 액션
• 미들웨어
• 리듀서
• 스토어

액션

• type 속성값을 가진 js 객체.
• action 객체를 dispatch 메서드에 넣어서 호출하면 리덕스는 상탯값을 변경하기 위해 위 그림 처럼 수행한다.

store.dispatch({ type: 'ADD', title: '타이틀 추가할 내용', priority:'high'})

미들웨어

• 리듀서가 액션을 처리하기 전에 실행되는 함수다.
• 디버깅 목적으로 상탯값 변경 시 로그를 출력하거나, 리듀서에서 발생한 예외를 서버로 전송하는 등의 목적으로 활용 한다.

const middleware = store => next => action => next(action)

스토어

• 리덕스의 상탯값을 가지는 객체다.
• 액션의 발생은 스토어의 dispatch 메서드로 시작된다
• 스토어는 액션이 발생하면 미들웨어 함수를 실행하고, 리듀서를 실행해서 상탯값을 새로운 값으로 변경한다.

const INITIAL_STATE = { value: 0};
const reducer = createReducer(INITIAL_STATE, {
  INCREMENT: state => (state.value +=1),
});
const store = createStore(reducer);

비동기 처리 방법

• 리듀서 안에서 비동기를 하게 되면 3번 원칙인 '상탯값은 순수 함수에 의해서만 변경되어야 한다.' 위배된다. 그래서 middleware에서 처리 하는데 이때 패키지를 쓴다.
• redux-thunk, redux-observable, redux-saga

출처: 실전 리액트 프로그래밍, 이재승, 인사이트(2020), pg 249~308

---

Redux (리액트를 다루는 기술 - velopert)

• 리액트 상태 관리 라이브러리
• 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적인 관리 가능
• 전역 상태를 관리할 때 효과적(Context API를 통해서도 가능)
• 프로젝트의 규모가 클 경우 리덕스 > Context API

  • 코드의 유지 보수성 높여주고 작업효율을 극대화해주기 때문

    ex) TODO

액션

• 상태에 어떠한 변화가 필요하면 액션(action)이 발생

• 하나의 객체로 표현된다

• 형식

  {
  	type: 'ADD_TODO'
  }

• 액션 객체는 type 필드를 반드시 가진다

  • type ⇒ 액션의 이름이라고 생각하면 된다
  • ex)

  {
  	type: 'ADD_TODO',
  	data: {
  		id: 1,
  		text: '공부하기'
  	}
  }
  
  {
  	type: 'CHANGE_INPUT',
  	text: '안녕하세요'
  }

액션 생성 함수

• 액션 객체를 만들어 주는 함수

const addTodo = (data) => ({
	type: 'ADD_TODO',
	data
}) 

• 변화를 일으켜야 할 때, 직접 액션 객체를 만들기보다 함수로 만들어서 관리

리듀서(reducer)

• 변화를 일으키는 함수
• 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 인자로 받아 옴
• 인자로 넘어온 두 값을 참고하여 새로운 상태를 만들어서 반환

const initialState = {
	counter: 1
};

const reducer(state = initialState, action) {
	switch(action.type) {
		case INCREMENT:
			return {
				counter: state.counter + 1
			};
		default:
			return state;
	}
}

스토어

• 한 개의 프로젝트는 단 하나의 스토어를 가진다
• 스토어 안에는 현재 애플리케이션 상태 & 리듀서 + 몇 가지 중요한 내장 함수
  • 스토어의 내장함수
    • 디스패치(dispatch)
      • 액션을 발생시키는 것
      • dispatch(action)
      • 디스패치 호출 ⇒ 스토어는 리듀서 함수를 실행시켜서 새로운 상태 만든다
    • 구독(subscribe)
      • 리스너 함수를 파라미터로 넣어서 호출해주면, 리스너 함수가 액션이 디스패치 될 때 (상태가 업데이트 될 때) 호출된다.

리어스의 세 가지 규칙

1. 단일 스토어
   • 1 app = 1 store
   • 다중 스토어가 불가능하지는 않다
     • 상태 관리가 복잡해질 수 있으므로 권장 X
2. 읽기 전용 상태
   • 상태를 업데이트 할 때 기존의 객체 건드리지 않고 새로운 객체 생성
   • 불변성 지켜주기 위해 spread 연산자 or immer와 같은 불변성 라이브러리 사용
   • 리덕스에서는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교검사를 한다
3. 리듀서는 순수한 함수
   • 변화를 일으키는 리듀서 함수는 순수 함수여야 한다.
     • 리듀서 함수는 이전 상태와 액션 객체를 인자로 받는다
     • 파라미터 외의 값에 의존하면 안된다
     • 이전 상태는 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다
     • 똑같은 파라미터로 호출된 리듀서 함수는 같은 결과 값을 반환해야 한다
   • 리듀서 함수 내부에서 랜덤값 만들기, Date 함수 사용하기, 네트워크 요청하기 X

Redux - React App 작업 환경 설정

UI

리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것.

• 프레젠테이셔널 컴포넌트
  • 상태 관리 X
  • props를 받아와서 화면에 UI를 보여주기만 하는 컴포넌트
• 컨테이너 컴포넌트
  • 리덕스와 연동되어 있는 컴포넌트로
  • 리덕스로부터 상태를 받아오기도, 리덕스 스토어에 액션을 디스패치 하기도 한다.

장점

• 코드의 재사용성
• 관심사의 분리가 이루어져 UI를 작성할 때 좀 더 집중할 수 있다.

• UI에 관련된 프레젠테이셔널 컴포넌트 ⇒ src/components
• 리덕스와 연동된 컨테이너 컴포넌트 ⇒ src/containers

Redux DevTools 의 설치 및 적용

• Redux 개발자 도구
• 크롬 확장 프로그램으로 설치하요 사용가능
• 패키지를 설치하여 적용하는 것 추천
  • yarn add redux-devtools-extension

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import { composeWithDevTools } from "redux-devtools-extension";
import App from "./App";
import rootReducer from "./modules";

const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

출처: 리액트를 다루는 기술(velopert님)

---

📌 Redux

• 전역(글로벌) 상태관리 라이브러리
• 스토어라는 가상공간에 데이터를 모아두어,
  필요한 컴포넌트에서 데이터를 가져다 사용, 변경 할 수 있음
• Context API 와 useReducer Hook 을 사용해서 개발하는 흐름과
  Redux(리덕스)를 사용하는 개발 방식이 유사
  • Redux는 리듀서와 액션이라는 개념을 사용

---

📌 Redux와 Context API의 차이는?

1. 미들웨어

• [유사점] Redux로 상태 관리 시 ➡ useReducer 에서 쓰였던 리듀서 함수를 사용

• [차이점] Redux는 미들웨어(Middleware)라는 개념이 존재

• [차이점] 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에
  우리가 원하는 작업들을 수행 할 수 있음
  

  - 특정 조건에 따라 ➡ 액션이 무시되게 만들 수 있습니다.
  - 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다.
  - 액션이 디스패치 됐을 때 ➡ 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다.
  - 특정 액션이 발생했을 때 ➡ 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다.
  - 특정 액션이 발생했을 때 ➡ 특정 자바스크립트 함수를 실행시킬 수 있습니다.

• [차이점 & 미들웨어 특징] 미들웨어는 주로 비동기 작업을 처리 할 때 많이 사용됩니다.
  
  

2. 유용한 함수와, Hooks

• connect 함수

  • 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props 로 받아올 수 있음
  • 컨테이너 컴포넌트를 만드는 또 다른 방법
  • 이 함수는 사실 앞으로 사용 할 일이 별로 없다. ❌❌
    • useSelector, useDispatch가 더 자주 쓰임

• useSelector, useDispatch, useStore 와 같은 Hooks

  • 손쉽게 상태를 조회하거나 액션을 디스패치 할 수 있음
    
    

• [차이점] connect 함수와 useSelector 함수에는
  내부적으로 최적화가 잘 이루어져있어서
  실제 상태가 바뀔때만 컴포넌트가 리렌더링 됨

• [차이점] Context API를 사용할 때에는
  그러한 최적화가 자동으로 이루어져있지 않기 때문에
  Context 가 지니고 있는 상태가 바뀌면
  해당 Context 의 Provider 내부 컴포넌트들이 모두 리렌더링 됨

---

📌 리덕스 언제 써야 할까?

1. 프로젝트의 규모가 큰가? ✔

• Yes: 리덕스
• No: Context API

2. 비동기 작업을 자주 하게 되는가? ✔

• Yes: 리덕스
• No: Context API

---

📌 리덕스에서 사용되는 키워드

💫 액션 (Action)

• 무슨일이 일어났는지 설명하는 자바스크립트 객체
• 액션 객체는 type 필드를 필수적으로 가지고 있어야 함
• 그 외는 개발자 마음 >.<

{
  type: "TOGGLE_VALUE"
}

💫 액션 타입 (Action Type)

• actionTypes.js 로 네이밍을 자주한다.
• 액션 명은 대문자로 작성한다.

// 액션 정의 : .../actionTypes.js 

// 액션명은 대문자로 입력
export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

{
  type : ADD_TODO,
  text : 'build my first Redux app',
  index : 33, // 고유인덱스를 사용하기도함.
}


// 액션을 사용할 곳
import  { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER } from '경로/actionTypes'

💫 액션 생성함수 (Action Creator)

• 액션을 만드는 함수 (템플릿 느낌이라고 생각이 들었다!!!)
• 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.
• 액션 생성함수를 만들어서 사용하는 이유:
  • 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함
  • 그래서 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용
• 리덕스를 사용 할 때 액션 생성함수를 사용하는것이 필수적이진 않음
  • 액션을 발생 시킬 때마다 직접 액션 객체를 작성할수도 있음

export function addTodo(data) { <-- `export` 키워드
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수로도 만들 수 있습니다.
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

💫 리듀서 (Reducer)

• 변화를 일으키는 함수

• 액션(이름표)에 대한 리듀서(함수)를 실행하여 상태를 변경한다.

• 두가지의 파라미터를 받아온다.

  • 현재의 상태와, 액션
    
    

  function reducer(state, action) { <-- 현재 상태 & 액션을 받아 옴!!
    // 상태 업데이트 로직
    return alteredState;
  }

  
  

• 리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다.

• 이 리듀서는 useReducer 를 사용할때 작성하는 리듀서와 똑같은 형태를 가지고 있다!

import * from './headerTypes' // 해더컴포넌트 액션타입 모두 불러오기
const initState = { // state의 초기화 설정
  state01 : {},
  state02 : "",
  state03 : true,
  stateData : [],
  ...
}

// 해더 컴포넌트용 리듀서 정의, 각각의 컴포넌트별 리듀서, 액션, 액션크리에이터를 각각 작성하여 RootReducer.js에서 통합하여 store에 적용한다.
const headerReducer = (state = initState, action) => {
  switch (action.type) {
    case ADD_TODO :
      return {
        // 기존 state를 변경하지 않기위해 전개연산자
        //or object.assign()사용하여 복사본생성
        ...state,
        addTodo : action.payload.addTodo
      }
    case <액션타입명> :
      return {
      ...state, // 누적 state 
      // 액션크리에이터함수 = action 자리에 오며, 인자로받은 state값이 적용
      <stated이름> : action.payload.<state이름>
      }
      
    // 기본값 꼭 지정해주기
    default : 
      return state
  }
}

💫 스토어 (Store)

• 데이터가 저장되는 가상공간
  • store.js 파일을 만들어 스토어를 따로 관리하는 것이 좋다.
• createStore(<루트리듀서>,<상태 초기값 지정>,<미들웨어들>)를 통해 스토어 생성
• [차이점] 리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 된다.
  • Context API feature 별로 만들었었음!
• 스토어 안에는,
  현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있다.

// 스토어생성기, 미들웨어적용 모듈 임포트
import { createStore, applyMiddleware } from 'redux';

// 여기서 부터 미들웨어/데브툴 관련 임포트
import { composeWithDevTools } from 'redux-devtools-extension';
import logger from 'redux-logger';
import thunk from 'redux-thunk';

// 루트 리듀서 임포트
import rootReducer from './rootReducer';

// 스토어 생성
const store = createStore(
  rootReducer, // 리듀서 연결
  initState, // 상태 초기값
  composeWithDevTools(applyMiddleware(thunk, logger))
  // 사용할 데브툴/미들웨어 연결
)

💫 디스패치 (dispatch)

• 스토어의 내장함수 중 하나
• 액션을 발생 시키는 것
• dispatch 라는 함수에는 액션을 파라미터로 전달
  • dispatch(action)
• 스토어는 리듀서 함수를 실행시켜서
  해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어 준다.

💫 구독 (subscribe)

• 스토어의 내장함수 중 하나
• 함수 형태의 값을 파라미터로 받아온다.
• dispatch 라는 함수에는 액션을 파라미터로 전달
• subscribe 함수에 특정 함수를 전달해주면,
  액션이 디스패치 되었을 때 마다 ➡ 전달해준 함수가 호출
• 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없다! ❌❌
• 대신에 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는
  useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독한다.

---

Redux 설치

• react-redux는 redux와 react 컴포넌트를 연동하여 store에 저장된 상태를 props로 전달하도록 도와준다.
• 어느 곳은 redux만 설치해도 된다고 하는데.. 확실히 잘 모르겠다..!
  • 찾아보니 2개 같이 쓰는 것을 권장함!

npm install --save redux
npm install --save react-redux

---

• 폴더 구조
  • components : 컴포넌트들, 화면에 보여지는 애들
  • modules : 액션, 리듀서 저장
  • 

참고

• 6장.리덕스
• 리덕스+리액트