[React] React예제 200 (78~84) - Redux

 

 

 

 

기본 개념

 

!

Redux는 컨텍스트와 마찬가지로 데이터를 필요한 컴포넌트에서만 요청해 사용할 수 있다. 

 

!

스토어 (store)

 

컨텍스트는 부모 컴포넌트에서 생성한 데이터에 모든 자식 컴포넌트가 접근할 수 있다.

Redux는 컴포넌트 외부의 스토어라는 곳에서 데이터를 관리한다.

 

따라서 컴포넌트의 위치에 상관없이 스토어에 접근해 데이터를 사용하고 변경할 수 있다.

 

 

 

npm install --save redux

 

명령어로 redux를 설치해준다.

 

 

 

 

!

Redux의 데이터 변경 과정

 

스토어 > 컴포넌트  > 액션 > 리듀서 > 스토어

 

 

 

!

액션

 

앱의 변경사항을 기술한 객체이다. 

어떤 형태의 action을 수행할지 지시하는 type필드가 있어야 한다.

 

 

예시

export const ADD = 'ADD';

export const add = () => {
  return {
    type: ADD
  }
};

 

 

 

 

 

!

리듀서

 

리듀싱 함수라고 부르기도 한다.

현재상태와 액션 객체를 파라미터로 받아 새 상태로 변환하는 함수다.

 

 

 

 

---

 

 

예제

 

버튼을 클릭하면 react 문자 뒤에 200을 붙여줄 것이다.

 

 

이렇게!

 

 

 

값은 누적된다.

 

 

 

폴더 상태, src 폴더에 추가로 button 컴포넌트를 추가할 것이다.

 

 

 

1. Store 만들기

 

index.js (src)

 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { legacy_createStore as createStore} from 'redux';
import reducers from "./reducers"
// configureStore 사용을 권장 -> 그냥 createStore은 취소선 그어짐
// reducers : reducers 폴더의 경로 

const store = createStore(reducers);
// Redux 스토어 생성함수로 스토어를 만든다.
// store: 리덕스에서 데이터를 관리하는 장소 

const listener = () => {
  ReactDOM.render(
    <App store={store}/>, // App컴포넌트에 생성한 스토어를 전달한다. 
    document.getElementById('root')
  );
};
// 렌더 함수를 listener라는 함수 내에 위치시켰다.

store.subscribe(listener);
//subscribe메소드를 통해 store데이터에 변화가 생기면 listener함수(의 render함수)가 실행된다.
//렌더함수가 실행되며 변경된 데이터를 렌더링 한다.

listener();
//초기 렌더링을 위해 수동으로 실행시킨다.

 

!

store를 만들고, store를 자식에게 props으로 넘겨주면 자식 컴포넌트에서도 store에 접근할 수 있다.

 

!

createStore(reducers)

 

스토어를 생성하는 함수다. 

 

이때 매개변수로 reducers 폴더의 경로를 넘겨준다. 

reducers의 index.js에는 데이터의 초깃값을 설정하고

데이터를 변경하여새 상태를 반환하는 함수(리듀서)가 있다.

 

 

 

!

subscribe(listener)

 

이 함수를 통해 store데이터의 변화를 감지한다.

상태트리가 바뀔 때 마다 매개변수로 받은 콜백함수를 실행한다.

 

해당 코드에선 store에 변화가 생기면 listener함수의 렌더 함수가 실행되고, 변경된 데이터를 렌더링한다.

 

 

 

 

 

 

 

 

 

2. 상속받은 store로 store에 접근  & 디스패치 함수

 

 

App.js

import React, { Component } from "react";
import StrAddButton from "./R78_StrAddButton";
// 버튼 컴포넌트 > StrAddButton

class App extends Component {
  render() {
    return(
      <div>
        <h1>Redux</h1>
        <span>{this.props.store.getState().data.str}</span> 
        {/* 현재 스토어의 데이터를 반환 받음 */}
        <br />
        <StrAddButton store={this.props.store} />
        {/* 버튼 컴포넌트에 props로 store를 전달해준다. */}
      </div>
    )
  }
}

export default App;

 

!

getState()

 

현재 스토어의 데이터를 반환하는 함수다.

 

현재 스토어엔 리듀서로 초기화된 객체 속 data라는 파라미터가 있다.

 

 

!

Button 컴포넌트에 스토어를 전달해준다.

 

 

 

 

 

 

 

 

<StrAddButton />

 

import React, {Component} from "react";
import {add} from "./actions";
// actions 폴더의 경로를 임포트 한다.
// actions 폴더의 index.js에는 add라는 함수가 있다. 

class StrAddButton extends Component {
  render() {
    return (
      <input value="React200" type={"button"} onClick={this.addString}/>
    )
  }

  addString = () => {
    this.props.store.dispatch(add());
  }
  // 버튼이 클릭되면 dispatch함수가 실행된다.
  // dispatch함수를 통해 add함수의 반환값을 스토어에 전달한다. 
}

export default StrAddButton;

!

 

수행할 action이 담긴 객체를 import한다.

 

 

!

dispatch(action)

 

 

store의 상태변경을 위해 action객체를 보내는 함수다.

 

해당 코드에선 다음 객체를 보내게 된다.

 

(actions/ index.js)

export const ADD = 'ADD';

export const add = () => {
  return {
    type: ADD
  }
};

 

 

 

3. 스토어 데이터를 초기화 & 변경하는 리듀서

 

리듀서 (reducers / index.js)

import { ADD } from "../actions";
import {combineReducers} from 'redux';

const iniState = {
  str: 'react',
};

const data = (state = iniState, action) => {
  switch (action.type) {
    case ADD:
      return state, {
        str: state.str + '200'
      };

    default:
      return state;
  }
};

const App = combineReducers({
  data
});

export default App;

!

 

combineReducers()

 

리듀서 함수 data를 하나의 리듀서 함수로 변환하여 export 한다.

 

!

리듀서 함수는 누적값과 액션값을 받아 새로운 누적값을 반환하게 된다.

 

 

 

 

 

---

 

 

 

 

 

동작 요약

 

 

1. index.js(src)에서 createStore()을 통해 스토어를 만들고 리듀서(reducers/index.js)에서 초기화 한다.

2. 버튼을 클릭하면 dispatch(action) 함수가 리듀서에 action을 전달한다.

3. action을 전달받은 리듀서는 받은 action에 따라 현재 store의 데이터를 변경하고 반환한다.

4. 현재 store가 변경되었으므로 subscribe(callback) 를 통해 콜백함수를 실행시킨다.

 

 

 

 

 

끝!

 

 

 

 

 

 

 

리듀서 메소드를 모르니까... 메소드 찾아보고 무슨 역할인지 파악하는 데 시간이 오래 걸린 것 같다....