리액트리덕스(react, redux) 사용법

이 글은 리액트와 리덕스를 모르면 이해하기 힘듭니다.

 

리덕스를 모른다면 아래글을 읽고 와주세요

https://ms3864.tistory.com/60

리덕스(redux) 사용법1

기본 틀을 먼저 설명하겠습니다.

react와 redux모두 state를 가지고 있습니다. 그래서 헷갈리면 안됩니다. react는 하위컴포넌트로 state를 props로 넘겨서 상태관리를 하는데 redux는 store에서 모든 state를 관리합니다.

처음 리액트에서 리덕스를 사용하는 분들은 어떻게 두개를 합칠수있는지 이해가 안될겁니다.

먼저 react-redux를 사용하지 않고 코딩을 한다고 생각해보겠습니다.

보통 src에 containers라는 파일을 만듭니다.(폴더 이름은 상관없습니다.)

그리고 redux로 상태관리할 state가 있는 파일이름(A)과 같은 이름을 containers폴더에 만듭니다.

그리고 containers폴더안에 A에서 dispatch나 subscribe를 해서 containers폴더 밖에있는 A에 onClick이나 props로 넘겨줍니다. 그림으로 표현하면 아래와 같습니다. A를 가기전에 containers안에있는 A를 거치는 것입니다.

이렇게 되면 A는 redux와 없이 상태유지를 할 수 잇습니다.(containers의 A에서 redux store를 사용하니) 

 

 

 

먼저 아래 코드로 모듈을 설치해줍니다.

npm install redux
npm insall react-redux

 

store.js라는 파일을 만들고 아래 코드를 입력합니다.

리듀서와 스토어의 개념을 알고있으면 쉽게 이해할 수 있습니다.

이해가 되지 않는다면 저번글을 한번만 보고 오세요.

...state는 이전 상태를 그대로 가져오는 코드입니다. state가 복잡하다면 일일히 가져올수 없기 때문에 이런식으로 코드를 입력합니다.

window.~~~는 redux devtools를 사용하기 위한 코드입니다.

import { createStore } from "redux";

export default createStore(function (state, action) {
  if (state === undefined) {
    return { number: 0 };
  }
  if (action.type === "INCREMENT") {
    return { ...state, number: state.number + action.size };
  }
  return state;
}, window.__REDUX_DEVTOOLS_EXTENSION__ &&
  window.__REDUX_DEVTOOLS_EXTENSION__());

 

가장 상위 파일인 index.js에

아래와 같이 좀전에 만든 store.js를 import하고 감싸주면 됩니다.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import store from "./store";
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

 

먼저 이 connect를 알아야합니다.

import { connect } from "react-redux";

 

 

connect에 대해 자세히 알고 싶다면 아래 링크를 들어가서 읽어보세요

https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e

connect.js explained

dispatch를 간단하게 할 수 있습니다. 자세한 설명은 링크를 읽어보세요

import AddNumber from "../components/AddNumber";
import { connect } from "react-redux";
function mapReduxDispatchToReactProps(dispatch) {
  return {
    onClick: function (size) {
      dispatch({ type: "INCREMENT", size: size });
    },
  };
}
export default connect(null, mapReduxDispatchToReactProps)(AddNumber);

이런식으로 받으면 됩니다.

        <input
          type="button"
          value="+"
          onClick={function () {
            this.props.onClick(this.state.size);
          }.bind(this)}
        ></input>

 

subscribe를 간단하게 할 수 있습니다.

import DisplayNumber from "../components/DisplayNumber";
import { connect } from "react-redux";
function mapReduxStateToReactProps(state) {
  return { number: state.number };
}
export default connect(mapReduxStateToReactProps, null)(DisplayNumber);

이런식으로 props를 받으면 됩니다.

        <input type="text" value={this.props.number} readOnly></input>

 

일단 이정도만 알아도 react에서 redux를 사용하는데는 문제가 없습니다.