[REACT] REDUX

 

Redux

- 상태 관리의 로직을 컴포넌트 밖에서 처리

- 목표 : 플럭스를 기반으로 애플리케이션 안에서 변경된 데이터가 어떻게 흘러가는지 더 명확히 표현하도록 해줌

- 디스패처를 없애고 애플리케이션 상태를 불변 객체 하나로 표현함으로써 플럭스의 개념을 더 단순화함

- 모든 상태 데이터를 한 객체에 모으게 함으로써 애플리케이션에서 상태를 보는 관점을 단순하게 유지

 

 

ARS 순서로 실행

 

Action : 객체 형태로 되어 있고, 상태를 변화시킬 때 참조하여 변화를 일으킴

- 상태를 바꿀 때는 객체 전체를 바꿔치기 하는 방식을 사용하는데, 바꿀 대상을 지정해줌

- 애플리케이션 상태 중에서 어떤 부분을 바꿀지 지시하고 그런 변경에 필요한 데이터 제공

- event가 하는 일이랑 똑같다고 봐도 됨

  ex) 버튼에서 onClick 속성을 쓰지 않고, 내가 지정한 Action으로 사용함

- Reduce로 가서 실행 할 문자열을 설정

// Action - step 1
const actionTo = (dispatch) => {
  console.log("actionTo");
  return {
    onMyClick: () => {
      console.log("onMyClick action"); //디버깅용
      dispatch({
        type: 'MYCLICK' // 대문자로 작성하는 것이 일반적
      })
    }
  }
}

Dispatch : 액션을 전달하는 과정

- Action에서 전달한 내용들을 Dispatch가 Reduce로 가져다줌

 

Reducer : 현재 상태와 액션을 인자로 받아 새로운 상태를 만들어 반환하는 함수

- 상태를 변화시키는 로직이 있는 함수 -> 모든 상태 변화는 Reducer에서 일어남

- 상태 트리 중 특정 부분을 갱신하기 위해 만든 함수

- 반드시 순수 함수이어야 함 -> (state, action) 값이 변경되면 안됨

- state는 필수로 초기화 되어야함

#순수 함수 : 값을 전달 받은 인수가 함수 안에서 갱신되지 않고, 전역 변수를 쓰지 않는 함수  ex) state 

// Reducer - step 2
// export : index.js에서 쓸 것
export function reducer(state = {num: 10}, action){ // (상태 = {초기값 설정}, 액션)
  
  // 무조건 switch문
  switch(action.type){
    // TO DO
    //-------------------내가 작업하는 범위 시작-------------------
    case 'MYCLICK': 
      console.log("case");
      return state;
    //-------------------내가 작업하는 범위 끝-------------------
    default:
      return state;
  }
}

// State - step 3
const stateTo = (state) => {
  return {
    // num 갱신 가능하지만 갱신은 reducer에서 해야함!
    num: state.num
  }
}

 

Store : 애플리케이션의 상태 데이터를 저장하고 모든 상태 갱신을 처리

- redux 에서는 오직 한 스토어만 허용

- Store에 등록해야 Observer 역할을 위해 등록 대상이라고 인식

- index.js에서 Reducer를 Store에 등록

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App, {reducer} from './App';
import * as serviceWorker from './serviceWorker';
import {createStore} from 'redux';
import {Provider} from 'react-redux';

// store : reducer가 여러개일 때 관리하는 놈
const store = createStore(reducer);

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

serviceWorker.unregister();

 

Middleware : 서로 다른 두 계층이나 두 소프트웨어를 붙여주는 풀 같은 역할을 하는 소프트웨어

 

Factory : 스토어를 만드는 과정을 관리하는 함수

const store = storeFactory(initalData)

 

---

 

React Redux : 컨텍스트를 통해 스토어를 전달하는 과정의 복잡함을 덜어주는 도구를 제공하는 라이브러리

- 설치

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

 

Provider : 컨텍스트에 스토어를 설정할 때 사용할 수 있는 컴포넌트

- 코드를 더 단순히 유지하면서 코드 작성 시간을 줄일 수 있음

 

connect : 컴포넌트를 반환하는 함수를 반환하는 고차 함수

- react redux를 사용하면 redux store의 현재 상태를 표현 컴포넌트의 프로퍼티로 연결하는 컨테이너 컴포넌트를 쉽게 만들 수 있음

- react redux는 콜백 프로퍼티와 store의 dispatch 함수도 연결 해줌

-> 위의 작업을 connet로 이루어짐

import { connect } from 'react-redux';

export default connect(
  // state, action 순으로 지정해놓은 것을 걸어줌
  stateTo, actionTo
)(App);

 

---

 

Presentational Component

- 오직 뷰만 담당

- DOM 엘리먼트 + 스타일

- 리덕스 스토어에 직접 접근할 권한은 없고, 오직 props로만 데이터를 가져올 수 있음

- 대부분은 state가 없지만, 오직 UI와 관련된 state는 존재

- 함수형 컴포넌트로 작성

- state가 있어야 하거나 라이프사이클 메소드가 필요할 때는 클래스형 컴포넌트로 작성

 

Container Component

- 컴포넌트들의 관리를 담당

- DOM 엘리먼트를 직접적으로 사용하는 경우는 없고, 감싸는 용도에만 사용

- 스타일을 갖고 있지 않아야 함 -> 스타일은 모두 프리젠테이셔널 컴포넌트에서 정의해야 함

- 상태를 갖고 있을 때가 많으며, 리덕스에 직접 접근 가능

 

두 구조의 장점

- 사용자가 이용할 유저 인터페이스와 상태를 다루는 데이터가 분리되어 프로젝트를 이해하기 쉬움

- 컴포넌트 재사용율도 높음