Introduction

Redux에 대해서 배워보자. 바로 고고! 🙋🏻‍♂️

기존의 문제점

Redux를 쓰지않으면 어떤 문제점이 있을까?

• redux를 사용하지 않으면 props를 통해서 매개변수를 넘겨주어야 함.
• 또한 값을 변경할때도 이벤트 핸들러를 전달해주어 사용해야만 했다.

정리하자면, Props형태로 State를 직접 자식 컴포넌트에게 넘겨서 사용함. 그걸 또 넘기고...넘기고..
👉🏻 너무나 복잡하고 불편함..

해결 방안

그럼 Redux를 사용한다면?

Redux의 STORE를 사용하게되면 직접적으로 데이터에 접근하고, 변경 또한 STORE에 요청해서 재 랜더링 가능하기에 위의 문제를 해결할 수 있다.

DAO를 하나 만들어 놓고 특정 기능을 요청하면 데이터를 변경하는 방식을 생각하면 쉽다.

DAO란?
DAO (Data Access Object)

• DB의 data에 접근하기 위한 객체.
• DB에 접근하는 로직을 분리하기 위해 사용된다.
• MVC 패턴에서의 Model의 역할.

그래서 Redux 또한 DAO랑 동일하다.

직접 DB에 접근하여 data를 삽입, 삭제, 조회 등 조작할 수 있는 기능을 수행할 수 있는 것이다.

컴포넌트의 상태가 변하면 변경된 상태를 참조하는 컴포넌트가 다시 그려지도록 하는 것.

👉 Redux !

자 이제 Redux에 대해서 본격적으로 사용해보고 알아보자.

---

Redux

• 컴포넌트 상태를 하나의 저장소인 Store를 이용.
• 쳬계적으로 상태관리 가능.
• Store의 특정 상태가 변경되면, 관련된 컴포넌트에 적용될 수 있도록 처리한다.

사실 state에 직접 접근이 아니라 사실 메소드에 접근하는 형식이다. (@getter @setter 느낌)

Redux의 장점

예측 가능

Redux는 일관되게 작동하고 다양한 환경에서 실행가능하다.

중앙 집중식

애플리케이션의 상태와 논리를 중앙으로 집중화 하며 실행취소/다시 실행, 상태 지속성등과 같은 강력한 기능을 사용 가능

디버깅 가능

devTools를 사용하면 애플리케이션 상태가 언제, 어디서, 왜, 어떻게 변경되었는지 쉽게 추적할 수 있다.
Redux의 아키텍처를 사용하면 변경사항을 기록하고 완전한 오류 보고서를 서버에 보낼 수 있음.

유연성

Redux는 모든 UI계층에서 작동하며 사용자의 요구사항에 맞는 대규모 애드온 에코시스템을 갖추고 있음.

Redux의 4가지 행동

Action

• 어떤 작업을 할 건지 구분 해준다.
• Object 형태로 flag를 함께 Reducer로 전송한다.
• 데이터또한 함께 보냄.

Reducer

• Action에게 받은 object로, 모든 컴포넌트들이 공유 할 수 있는 state의 값을 변경한다.
• setState의 역할(setter 역할)

Store

• 상태를 계속 확인 하고 변경된 사항을 View에게 알려 줌.
• 변경이 일어나면 Component는 자동 갱신 됨으로 Reducer를 Store에 적용 시켜주기만 하면 됨.
• 대부분의 복잡한 부분은 Store에 있으므로 Store만 보면 된다.

View

• 컴포넌트를 의미

자 그럼 실습을 통해 실제로 사용해보자!

---

실습

Redux 설치

npm install redux --save
npm install react-redux --save
npm install @reduxjs/toolkit react-redux

짧게 쓴다면..(위 코드와 동일하다)

npm i redux -S
npm i react-redux -S
npm i @reduxjs/toolkit react-redux

소스코드 작성

Controller에서는 index의 Redux를 제어
여기서 dispatch를 통해서 Redux를 제어
app.js에서는 index.js의 상태가 변경되면
useSelector라는 부분으로 변경사항을 감지하고 재 랜더링함.
Controller에서 디스패치에서 호출할 때 index.js의 reducer를 받아와서 씀
index.js가 제일 최상위 컴포넌트이므로 index.js에다가 redux를 설정하고 여기에 있는 reducer와 State를 사용하는 것이다.

index js에 정의

// react-redux 관련 모듈 import
import {Provider} from "react-redux"
import { legacy_createStore as createStore } from 'redux';

여기서는 별명 (Alias)를 통해 createStore를 그대로 사용할 수 있도록 했다.

CurrentState

//필요한 State들을 집어 넣어서 사용하면 된다.
const currentState = {count : 1};

이를 관리해 주는 getter/setter가 필요한데 이를 관리해 주는 것이 바로 reducer이다.

reducer

function reducer(state = currentState, action) {
  // 만약 값이 정의되지 않았다면 값을 넣어준다.
  if(currentState == undefined) {
    return {count : 10};
  }
  // State를 변경
  if(action.type == 'count증가') {
    state.count++;
  }
  if(action.type == 'count감소') {
    state.count--;
  }
  // 새로운 State를 만들어서 반환
  const newState = {...state}
  return newState;
}

createStore를 통해서 reducer를 store로 생성해준다.

Store 생성

let store = createStore(currentState);

이제 app.js쪽으로 넘어가보도록 하자.

---

App.js에 정의

import { useSelector } from 'react-redux';

일단 선언된 State인 count값을 index.js에서 하나 가져와 볼 것이므로 redux에서 useSelector를 선언한다.

useSelect 사용

  // 콜백함수로 만들어준다 state를 useselector에서 받아서 값을 가져옴
  const count = useSelector((state)=>{
    return state.count;
  })
  
  // 리턴되는 부분
  return(
      <div>
    <h1>React Redux Programing</h1>
    <p>count : {count}</p>
	</div>
)

값이 잘 나오는 것을 확인할 수 있다.

dispatch 사용(값 변경)

이제 dispatch를 사용해보자.
useSelector는 값을 참조할때 값을 변경할때는 useDispatch를 사용한다.

먼저 dispatch 사용을 위해 useDispatch를 통해 dispatch를 하나 생성하자.

// import문에다가 추가
import { useSelector, useDispatch } from 'react-redux';
//  dispatch 객체 생성 - 함수처럼 사용함
const dispatch = useDispatch();

---

리턴문을 다음과 같이 추가해준다.

  return (
    <div>
    <h1>React Redux Programing</h1>
    <p>count : {count}</p>
    <p>
        <button onClick={()=>{
          dispatch({type:'count증가'})
        }}>
          증가
        </button>
        <button onClick={()=>{
          dispatch({type:'count감소'})
        }}>
          감소
        </button>
    </p>
    </div>
  );

---

다음과 같이 버튼을 통해 증가와 감소가 이루어지는 것을 확인할 수 있다.

컴포넌트 분리

너무 소스코드가 난잡해질 수 있으므로 이쯤에서 컴포넌트를 모듈화하자.

View.js를 하나 생성해서 다음과 같이 만들어준다.

import { useDispatch, useSelector } from 'react-redux';

function StateView(){
    const count = useSelector((state)=> {
        return state.count;
    });
    const age = useSelector((state)=> {
        return state.age;
    });
    return(
        <>
        <p>count : {count}</p>
                <p>age : {age}</p>
        </>
    
        )
}
export default StateView;

Github

You can access to whole source code right Here!