[React] 카운터로 시작하는 Redux

👨🏻‍💻MVC 패턴과 FLUX 패턴

이렇게 어렵고 복잡한 MVC패턴의 문제점이었던 양방향 바인딩으로 인해서 state의 관리에 어려움을 겪었다.

단방향 바인딩을 위해서 FLUX패턴이 등장하게 되었다.

View는 MVC 패턴과 달리 데이터를 직접 변경시키지 않고 Action만을 넘겨준 후, View에서 이뤄진 Action은 반드시 Dispatcher를 거쳐 데이터 변경을 진행하게 됩니다.
데이터 변경이 이뤄진 이후, Store에 값을 저장하는 과정을 통해 View는 변경된 데이터를 Store를 통해서 전달받게 됩니다.
위와 같은 과정을 통해 이뤄진 데이터 변경은 뷰와 모델 사이의 state 전이를 간편화해주고 기존에 흐름을 파악하기 어려웠던 관리에 예측이 가능하게 해주어, 더욱 편리한 state 변경 방법을 제시하게 됩니다.
위와 같은 방식을 채택하여 최종적으로 2015년에 Dan Abramov에 의해서 React + Flux의 구조에 ‘Reducer’를 결합한 ‘Redux’가 등장하게 됩니다.

 

이후에 Flux 패턴을 이용한 Redux가 등장하게 되었는데, Store, Dispatch, Reducer에 대한 개념을 정확하게 다시 정리해주었습니다.

기존에 발생하던 prop drilling

 

flux 패턴

 

프론트엔드라면 꼭 읽어봐야할 바이블같은 글

프론트엔드에서 MV* 아키텍쳐란 무엇인가요?

🔍전역 상태관리가 필요한 이유

1. 리덕스는 복잡한 State관리를 단방향 데이터 흐름체계로 만들어주는 도구이다.

2. 구조가 간단한 경우, React만으로도 충분히 단방향 데이터 흐름을 사용할 수 있다.

3. 웹 구조와 흐름을 파악하고 설계과정에서 Redux의 사용여부를 결정하는 것이 좋은 애플리케이션을 구성하는데 도움을 준다.

 

전역 상태를 통해서 더 나은 컴포넌트 설계를 할 수 있다.

📤리덕스 설치하기

$ yarn add redux react-redux

react-redux는 redux를 react에서 사용할 수 있도록 해주는 라이브러리입니다.

📂프로젝트 구성하기

src 폴더 내부에 redux 폴더를 생성해주고 config, modules 폴더를 생성합니다.

 

경로에 맞게 js 파일을 생성합니다.

📁redux / config / configStore.js

📁redux / modules / counter.js

 

각각의 역할은 다음과 같습니다.

• redux : 리덕스와 관련된 코드를 모두 모아 놓을 폴더 입니다.
• config : 리덕스 설정과 관련된 파일들을 놓을 폴더 입니다.
• configStore : “중앙 state 관리소" 인 Store를 만드는 설정 코드들이 있는 파일 입니다.
• modules : 우리가 만들 State들의 그룹이라고 생각하면 됩니다.
  예를 들어 투두리스트를 만든다고 한다면, 투두리스트에 필요한 state들이 모두 모여있을 todos.js를 생성하게 되텐데요, 이 todos.js 파일이 곧 하나의 모듈이 됩니다.

 

/* ducks 패턴에 대한 글 */

 

⚙리덕스 구성요소 세팅하기

📁src/configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store;

creatorStore는 저장소를 만들어 주는 함수입니다.

리액트 앱의 크기가 커지다 보면 자연스레 Reducer가 많아집니다.

그 때 combineReducers는 Reducer들을 하나의 상태 객체로 만들어주는 역할을 합니다.

 

🤔createStore에 밑줄이 생겨요!
createStore는 더이상 업데이트하지 않습니다. deprecated이기 때문에 다른 함수를 사용하는 것을 추천하고 있습니다. redux-toolkit 라이브러리로 대체되었기 때문인데요.
당장에는 큰 문제는 없기 때문에 createStore를 이용해서 진행하겠습니다.

@deprecated
We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

📃index.js

import store from "./redux/config/configStore";
import { Provider } from "react-redux";

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

디렉토리 최상단의 index.js 파일에 Provider로 App컴포넌트를 감싸줍니다.

provider는 store에 접근할 수 있도록 연동해주는 역할을 합니다.

🔮구현하기

모듈 만들기

📁 src/modules/counter.js

// 초기 상태값
const initialState = {
  number: 0,
};

// reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter;

모듈의 기본적인 형태는 이렇게 잡아놓고 갑니다.

 

초기상태값은 useState 사용시에 초기값을 넣어주는 것과 같은 형태입니다.

const [count, setCount] = useState(0);

 

객체 형태이든 배열 형태이든 상황에 따라 필요한 값을 입력해주면 됩니다.

const initialState = 0;

const initialState = [0];

const initialState = {
  number: 0,
};

 

 

Reducer는 변화를 시키는 함수입니다. state hook에서의 setState의 역할이라고 생각하면 됩니다.

"함수"라는 것에 유의해야합니다.

const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

리듀서 내부에 각각의 동작인 Action을 추가하는 방법은 밑에서 살펴보겠습니다.

모듈 연결하기

📁src/redux/modules/config/configStore.js

import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter, // counter만 써도 됨 (ES6)
});

위에서 생성한 모듈을 생성해둔 store의 combineReducers에 추가해주면 store와 모듈이 연결됩니다.

 

Dispatch

리덕스는 action -> dispatch -> reducer 순으로 동작합니다.

순서를 기억하시고, 액션을 만들어서 Dispatch 사용하는 방법을 밑에서 살펴보겠습니다.

 

UseSelector

store와 모듈이 연결됐으면 UseSelector라는 Hook을 이용해서 store를 조회할 수 있습니다.

다음 코드로 조회해봅시다.

 

📃App.js

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  const counterStore = useSelector((state) => state);
 
  return <div>{counterStore}</div>;
}

export default App;

 

+1 버튼 만들기

📁src/redux/modules/counter.js

const initialState = {
  number: 0,
};

const counter = (state = initialState, action) => {
  switch (action.type) {
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      };
    default:
      return state;
  }
};

export default counter;

PLUS_ONE 액션을 Reducer 내부에 추가해줍니다.

 

import React from "react";
import { useDispatch, useSelector } from "react-redux";

const App = () => {
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  return (
    <div>
      {number}
      <button onClick={() => {
        dispatch(({type: "PLUS_ONE"}));
      }}>+ 1</button>
    </div>
  );
};

export default App;

버튼을 만들어서 dispatch를 onClick 이벤트 핸들러로 전달해줍니다.

이 때 dispatch 내부에 생성해 준 Action을 객체 형태로 전달합니다.

값을 store에서 읽어올 수 있도록 useSelector를 이용해서 state에 저장된 number을 가져옵니다.

 

 

 

-1 버튼 만들기

+1 버튼을 만든 것처럼 -1을 해주는 반대 기능도 만들어봅시다.

const counter = (state = initialState, action) => {
  switch (action.type) {
    case "MINUS_ONE":
      return {
        number: state.number - 1,
      };
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      };
    default:
      return state;
  }
};

const App = () => {
	...
  return (
    <div>
      <button onClick={() => {
        dispatch(({type: "MINUS_ONE"}));
      }}>- 1</button>
      {number}
      <button onClick={() => {
        dispatch(({type: "PLUS_ONE"}));
      }}>+ 1</button>
    </div>
  );
};

 

 

 

➕Action Creator 추가하기

다음과 같은 이유로 Action Creator를 사용합니다.

1. 가독성의 증가
Action Creator에 Action을 모아 놓으면 해당 모듈이 가지고 있는 Action을 한번에 확인할 수 있습니다.

2. 효율적인 유지보수
Action을 수정할 일이 생겼을 때 하나 하나 수정할 일 없이 Action Creator만 수정해주면 됩니다.

3. 휴먼 에러 방지
작성한 타입으로 자동완성 기능의 도움 받을 수 있습니다.

 

Action Creator를 만들어 봅시다.

 

📃counter.js

const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";

export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

export const minusOne = () => {
  return {
    type: MINUS_ONE,
  };
};

Action value는 상수로 선언해주고 (상수는 대문자로 작성하는 게 업계 표준입니다.)

선언한 상수를 이용해서 Action Creator를 만들어줍니다.

Action Creator는 App.js에서 사용할 예정이기 때문에 export를 붙여줍니다.

 

📃app.js

import { minusOne, plusOne } from "./redux/modules/counter";

const App = () => {
	...
  return (
    <div>
      <button onClick={() => {
          dispatch(minusOne());
      }}>
        - 1
      </button>
      {number}
      <button onClick={() => {
        dispatch(plusOne());
      }}>
        + 1
      </button>
    </div>
  );
};

app.js에서 생성한 Action Creator들을 import한 다음에

dispatch 부분에 입력해 사용해주면 됩니다.

---

[참고]

https://devlog-h.tistory.com/26

https://velog.io/@teo/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-MV-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94#flux-%ED%8C%A8%ED%84%B4%EA%B3%BC-redux

스파르타코딩클럽 react 숙련주차 강의