react - redux

📌Redux란?

React 프로젝트의 규모가 커질때마다 자식으로 넘겨주어야 하는 props의 깊이도 점점 깊어진다. 따라서, 어디에서든 내가 원하는 state를 사용할 수 있는 라이브러리 Redux이다. 리덕스를 사용하면 상태값을, 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다. 참고로 Redux는 react의 종속된 도구가 아니다! 

 

📌Redux 설치

npm 명령어를 통해서 라이브러리를 설치해준다. 리액트에서 redux 라이브러리를 더 효율적으로 사용할 수 있는 react-redux 라이브러리도 설치해주는 것이 좋다. 

npm install redux
npm install react-redux

이렇게도 가능
npm install redux react-redux

 

📌Redux 적용하기 

import './App.css';
import React, {useState} from 'react';

function App() {
  const [number,setNumber] = useState(1);

  return (
    <div id="container">
      <h1>Root : {number}</h1>
      <div id="gird">
        <Left1 doyi={number} />
        <Right1
          onIncrease={() => {
            setNumber(number+1)
          }}
        />
      </div>
    </div>
  );
}

function Left1(props) {
  return (
    <div>
      <h1>Left1 : {props.doyi}</h1>
      <Left2 dong = {props.doyi}/>
    </div>
  );
}

function Left2(props) {
  return (
    <div>
      <h1>Left2 : {props.dong}</h1>
      <Left3 sang = {props.dong}/>
    </div>
  );
}

function Left3(props) {
  return (
    <div>
      <h1>Left3 : {props.sang}</h1>
    </div>
  );
}

function Right1(props) {
  return (
    <div>
      <h1>Right1</h1>
      <Right2
        onIncrease={() => {
          props.onIncrease();
        }}
      />
    </div>
  );
  
}

function Right2(props) {
  return (
    <div>
      <h1>Right2</h1>
      <Right3 onIncrease={()=>{
        props.onIncrease();
      }} />
    </div>
  );
}

function Right3(props) {
  return (
    <div>
      <h1>Right3</h1>
      <input type='button' value="+" onClick={()=>{props.onIncrease();}}></input>
    </div>
  );
}

export default App;

 

이런식으로 무한 props을 이용한 넘어 넘어 숫자 전달하기 

 

 

우리는 이런 현상을 보며 Left3까지 와이파이, 블루투스와 같은 걸로 props를 연결할 수 없나라는 생각이 든다. 

 

 

📌Redux 흐름 

 

dispatch() 메소드를 통해 Action(액션) 객체가  발동된다.

dispatch(액션)를 통해 Reducer를 호출한다.

Reducer는 새로운 Store 를 생성한다.

 

📌Redux 3대 원칙 

1. 애플리케이션 상태는 모두 한 곳에서 집중 관리된다. (동기화 필요 ✘)
2. 상태는 불변(읽기 전용) 데이터 이며, 오직 액션만이 상태 교체를 요청 할 수 있다. (예측 가능)
3. 리듀서(함수)를 통해 상태의 최종 값만 설정한다. (단순화)

 

액션(action)

액션은 애플리케이션에서 "상태 변경을 설명하는 정보"를 스토어로 보내는 JavaScript 객체로 Redux에 알려(dispatch) 변화를 이끌어낸다. 상태 값을 변경(교체) 할 경우, 교체 할 상태 값(payload)을 redux(함수)에 보낼 수 있다.

 

리듀서(Reducer) 

모든 Redux 애플리케이션은 공통점이 있다. 바로 리듀서(reducer)를 구현해야 한다는 점이다. 리듀서란 '애플리케이션 상태를 교체하는 함수'를 말한다. '이전 상태(prevState)'를 '새로운 상태(state)'로 교체(return) 한다.

리듀서는 상태와 액션을 전달 받아 '이전 상태'를 '다음 상태'로 교체 한 후 반환한다. 주어진 상태를 수정하는 것이 아니라, 새로운 상태로 교체하는 것이 중요하다. 즉, 리듀서는 '순수한 함수'여야 한다.

 

스토어(Store)

Redux 스토어(store)는 애플리케이션의 상태를 관리하고, .getState(), .dispach(), .subscribe() 같은 메서드를 제공한다.

스토어는 애플리케이션의 상태를 나타내는 많은 key:value 쌍으로 구성된 정보를 가진 하나의 큰 JavaScript 객체이다. React 컴포넌트에 분산되어 있는 상태 객체와 달리 스토어는 하나만 존재한다.
스토어는 애플리케이션에 상태를 제공하며 상태가 업데이트 되면 뷰(UI)가 다시 그려진다.

 

스테이트(state)

Redux 스토어에서 관리하는 상태(데이터) 이다.

상태 트리(state tree)는 "불변 상태(Immutable State)" 즉 순수한 상태를 가져야한다. 애플리케이션의 UI, View 레이어 상태는 순수한 함수(리듀서)로 처리 될 때 예측 가능(사이드 이펙트 ✘) 하기 때문이다. 

 

서브스크립(subscription)

애플리케이션 상태 변경을 구독(subscribe, 감지) 하여 상태가 업데이트 되면 등록된 리스너(listener)를 실행시킨다.

 

 

순수한 함수란?

순수 함수는 반환(reture) 값이 전달 인자(argument) 값에만 의존하는 함수를 말한다. 순수 함수는 새로운 값을 계산한다. 동일한 유형의 인자 집합을 사용해 순수 함수를 호출하면 예측 가능한 결과 값을 확신할 수 있다. 또한 순수 함수는 전달 된 인자 값을 변경하지 않는다. 예를 들어 squareAll 함수는 전달된 배열 인자를 변경하지 않고, map 메서드를 사용해 새로운 배열을 반환한다.

 

📌Redux를 이용한 최종 코드 

import './App.css';
import React, {useState} from 'react';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch} from 'react-redux';

function reducer(currentState, action) {
  // reducer는 현재 state값과 어떻게 바꿀 것인지에 대한 action값 2개를 인자로 받는다. 
  if(currentState === undefined){
    return{
      number:1
    };
  }
  // 과거의 state를 복제한다. 
  const newState = {...currentState}
  // 그렇게 복제한 객체를 수정하면 불변성을 유지할 수 있다. 

  if(action.type === 'PLUS') {
    newState.number++;
  }

  // return한 값이 새로운 state값이 된다. 
  return newState;
}

const storei = createStore(reducer);
// createStore 는 전역 상태(state) 를 가지고 있는 store 객체를 생성하는 함수이다. 
// 그리고 store 는 getState, subscribe, dispatch API 를 제공한다.

function App() {

  return (
    <div id="container">
      <h1>Root </h1>
      <div id="gird">
        <Provider store={storei}>
          {/* 이젠 이 안에 있는 component는 store를 사용할 수 있다.  */}
          <Left1 />
          <Right1/>
        </Provider>
      </div>
    </div>
  );
}

function Left1(props) {
  return (
    <div>
      <h1>Left1 :</h1>
      <Left2/>
    </div>
  );
}

function Left2(props) {
  return (
    <div>
      <h1>Left2 : </h1>
      <Left3 />
    </div>
  );
}

function Left3(props) {
  // useSelector()는 함수를 인자값으로 받는다. 
  const number = useSelector( (state) => state.number);
  return (
    <div>
      {/* prop사용하지 않고 무선으로 연결한 형태이다. */}
      <h1>Left3 : {number}</h1>
    </div>
  );
}

function Right1(props) {
  return (
    <div>
      <h1>Right1</h1>
      <Right2 />
    </div>
  );
  
}

function Right2(props) {
  return (
    <div>
      <h1>Right2</h1>
      <Right3 />
    </div>
  );
}

function Right3(props) {
  const dispatch = useDispatch();
  return (
    <div>
      <h1>Right3</h1>
      {/* plus라고 하는 action을 전달한다. */}
      <input type='button' value="+" onClick={() => {dispatch({ type: 'PLUS'})}}></input>
    </div>
  );
}

export default App;

 

 

 

 

참고자료 

• https://yamoo9.github.io/react-master/lecture/rd-redux.html
• https://youtu.be/yjuwpf7VH74?feature=shared
• https://velog.io/@lsx2003/React-Redux로-상태관리-하기
• https://medium.com/@heoh06/리액트-redux와-사용법-731853fc3cd4