Redux by react

목차

 

 

 

당신에게 Redux는 필요 없을지도 모릅니다.

Redux 공식 홈페이지에 올라와 있는 글 중 하나이다.

구글링을 하면서 리덕스에 관한 로드맵을 봐서 어렵게 생각하고 있었는데,

그냥 공식 홈페이지 글과 같이 가볍게 접근하는 게 좋을 것 같다.

Redux by react

오늘은 react로 redux를 사용해보자,

redux toolkit를 쓰면 간편한 코드로 사용할 수 있지만,

구성 이해를 위해서 toolkit을 안 쓴 쌩코드로 redux를 공부 한 다음 toolkit을 포스팅할 거다.

설치

npm install --save react-redux

터미널에 해당 명령어를 입력하여 react-redux를 설치해주자

코드

//Store.js

import { createStore } from "redux";

const PLUS = "PLUS";
const MINUS = "MINUS";

const actionPlusOne = (number) => {
  return {
    type: PLUS,
    number
  };
};

const actionMinusOne = (number) => {
  return {
    type: MINUS,
    number
  };
};

function Store (number = 0, action) {
  switch(action.type){
    case PLUS:
      return number +1;
    case MINUS:
      return number -1;
    default:
      return number;
  }
}

const countStore = createStore(Store);

export default countStore;

export const actions = {
  actionPlusOne,
  actionMinusOne
};

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux';
import countStore from './Store';


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

//App.js

import React from "react";
import { connect } from "react-redux";
import {actions} from "./Store";

function App({data, plusOne, minusOne}) {

  function clickPlus(){
    plusOne(data);
  }

  function clickMinus(){
    minusOne(data);
  }

  return (
    <>
      {data}
      <button onClick={clickPlus}>Plus</button>
      <button onClick={clickMinus}>Minus</button>
    </>
  );
}

function getData(data){
  return { data };
}

function dispatchData(dispatch){
  return{
    plusOne: props => dispatch(actions.actionPlusOne(props)),
    minusOne: props => dispatch(actions.actionMinusOne(props))
  }
}

export default connect(getData, dispatchData)(App);

해석

으음 아무래도 이번 코드는

App 전체에 Redux를 가져올 index랑

Redux의 저장소랑

Redux 저장소를 제어할 컴포넌트까지 해서 파일이 3개 정도 된다.

Store.js

일단 Redux의 저장소를 만들자

//Store.js

import { createStore } from "redux";

const PLUS = "PLUS";
const MINUS = "MINUS";

//dispatch 함수
const actionPlusOne = (number) => {
  return {
    type: PLUS, // action type를 전달
    number      // 데이터값을 받아 전달
  };
};

const actionMinusOne = (number) => {
  return {
    type: MINUS, // action type를 전달
    number		 // 데이터값을 받아 전달
  };
};

function Store (number = 0, action) {
  switch(action.type){
    case PLUS:
      return number +1;
    case MINUS:
      return number -1;
    default:
      return number;
  }
}

const countStore = createStore(Store);

export default countStore;

// dispatch 함수들을 한번에 내보냄
export const actions = {
  actionPlusOne,
  actionMinusOne
};

저번 글과 전반적으로 비슷하긴 한데,

dispatch(데이터 갱신)할 함수를 export(내보내기) 해야 하므로

export에 dispatch 함수를 담아두었다.

index.js

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux';
import countStore from './Store';


ReactDOM.render(
  <Provider store={countStore}>  // Redux 제공 태그 / 인자로 Redux 저장소를 넣자
    <App />
  </Provider>,
  document.getElementById('root')
);

저장소를 만들었으면

React 전체 컴포넌트를 Redux를 제공하는 태그인

Provider로 감싼 다음 인자로 Redux 저장소를 넣자.

App.js

어우.. 여기서 좀 힘들었는데,

개념이 확실히 안 잡혔었는데, dispatch 두 개 만들어보면서 이해가 되었다.

//App.js

import React from "react";
import { connect } from "react-redux";
import {actions} from "./Store";

export default connect(getData, dispatchData)(App);
// connect 함수로 Redux와 연결한다.
// 첫번째 인자는 store에서 data를 가져오는 것
// 두번째 인자는 데이터를 갱신하는 것

function getData(data){
// redux로부터 data를 가져오는 함수를 정의했다
// 인자로 data를 가져온다
  return { data };
// = return { data : data}
// data를 App.js에 data라는 이름으로 넘긴다.
}

function dispatchData(dispatch){
// redux 데이터를 변환시키는 오브젝트를 정의한다.
  return{
    plusOne: props => dispatch(actions.actionPlusOne(props)),
    // plusOne이란 이름으로 App.js에 넘긴다
    // props 인자를 받아 store 파일에서 가져온 actions.actionPlusOne에 전달
    minusOne: props => dispatch(actions.actionMinusOne(props))
    // minusOne이란 이름으로 App.js에 넘긴다
    // props 인자를 받아 store 파일에서 가져온 actions.actionMinusOne에 전달
  }
}

function App({data, plusOne, minusOne}) {
// getData에서부터 data를 가져왔고,
// dispatchData로부터 object 두개를 받았다.

  function clickPlus(){ // Plus 버튼을 누르면 
    plusOne(data); // data를 가지고 plusOne이 발동
  }

  function clickMinus(){ // Minus 버트을 누르면
    minusOne(data); // data를 가지고 minusOne이 발동
  }

  return (
    <>
      {data} // redux로부터 data가 갱신된다.
      <button onClick={clickPlus}>Plus</button>
      <button onClick={clickMinus}>Minus</button>
    </>
  );
}

 

끝

어우 진짜 ㅋㅋㅋ 고생 좀 했다... 진짜....

그래도 뭐 이렇게 진짜 학 단계에서 습 단계까지 간 거니

좋구망

응..? 나.. 이렇게 고생해놓고 제일위에 그냥 가볍게 접근하라고 해놨잖어..?

쉽습니다 여러분 ^^7