[react] redux로 상태 관리하기 #시작하며

시작하며

App이 점점 규모가 커지면서 상태 관리할 필요를 계속 느끼고 있었는데, 이번에야 도입했다. 필요한 모듈을 설치하고, 간단하게 +/- 버튼을 통해 카운트되는 기능을 만들어보면서 Redux에 접근해봤다.

필요 모듈 다운로드

yarn add react-redux redux redux-actions

yarn을 통해 위 dependencies를 받았다.

폴더 구성

최종 폴더 구성은 사진처럼 되어 있다. src/store 내 config.js, index.js 파일을 가지며, modules 폴더를 따로 두었다.

store 폴더의 구성

store

1. config.js 파일 생성

해당 파일은 여러 store를 모아 외부 컴포넌트와 연결하기 위함이다. store는 state를 관리하는 일종의 보관처.

// src/config.js
import { createStore } from 'redux'; // 여러 store를 제공할 수 있는 기본 환경을 만든다. 

우선 config.js 파일은 위처럼 만들어두고 시작한다.

2. store 디렉토리 아래에 modules 디렉토리를 생성

modules 
└ index.js 
└ test.js

• modules : state를 관리하는 모든 store가 담기는 디렉토리로, 앞으로 추가될 모든 store는 이 디렉토리 내에서 관리한다.
• test.js : test를 위한 store 파일

2-1. test.js 파일 작성

// src/moduels/test.js

import { createAction, handleActions } from 'redux-actions';

const initialState = {
    num: 0
};

export default handleActions({
// ...
}, initialState);

redux-actions로부터 호출하는 두 함수는 store 내 actions를 제어한다. 위 코드에서는 num이라는 이름의 state가 생성되었다.

2-2. index.js 파일 작성

// src/modules/index.js
import { combineReducers } from 'redux';

import test from './test';

export default combineReducers({
    test
})

modules 디렉토리 내 store 파일이 차곡 차곡 쌓이면, 이를 한곳에서 모아 내보내는 것이 필요해진다. 외부에서 store가 필요해질 때는 src/store/moduels/index.js를 호출하면서 모든 store에 접근하도록 한다.

3. config.js 파일 수정

// src/config.js

import { createStore } from 'redux';
import modules from './modules';  // store가 담긴 정보를 호출한다. 

const configure = () => { // devTools라는 변수에 Redux Store의 환경 설정을 담는다. 
    const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
    const store = createStore(modules, devTools);

    return store;
}

export default configure;

1번에서 createStore 함수만 호출하고 만 config.js로 돌아가 위처럼 작성해준다.

여기서 createStore에 두 번째 인자는 선택적으로 사용할 수 있는데, redux에서 제공하는 devTool을 쓰고자 할 경우에 추가해주면 된다. 우선 Firefox나 Chrome에서 addon 또는 extension을 받아준다.

Firefox addon 검색 결과

이를 받아준 후, 코드 상에서 해당 설정을 마치면

Redux Dev Tool

이런 DevTool을 사용할 수 있게 된다. 위에 counter와 isLogged가 있는 모습은, 테스트 삼아 counterReducer와 isLoggedReducer를 만들고 초깃값을 각각 0, false로 지정해주어서 이를 반영해 나타난 모습이다.

3-1. index.js 파일을 생성한다.

// src/store/index.js
import configure from './config';

export default configure();

이제 config 함수를 좀 더 쉽게 접근하도록 index.js 파일을 생성해 위처럼 작성해준다.

4. redux를 사용해보기

4-1. src/index.js 수정

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
import './config/lang/i18n'

import { Provider } from 'react-redux'; // react-redux 모듈로부터 Provider를 호출한다. 
import Store from './store/index.js'; // store에 아까 작성한 index.js를 불러온다. 

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

번역을 위해 i18n 모듈과 router 사용을 위해 BrowserRouter를 호출하고 있는 모습이다. 원래 <BrowserRouter> 태그를 감싸는 태그로, <React.StrictMode>가 있었다. 해당 태그를 <Provider store={Store}>로 수정해준다.

4-2. src/App.js 수정

// src/App.js
import React, { Component } from 'react';
import './App.css';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as testAction from './store/modules/test';

class App extends Component {

  render() {
    return(
      <div className='App'>
        <h1> Redux Test </h1>

        <div>
          <button> + </button>
          {/* num */}
          <button> - </button>
        </div>
      </div>
    )
  }
}

export default App;

클래스 컴포넌트로 작성되었다면 위처럼 UI를 작성해줄 수 있을 것이다. 함수형으로 작성된 App.js는 아래와 같다. 아래 코드에서는 코드 하단에 App의 defaultProps를 정의해준다.

import React from 'react';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as testAction from './store/modules/test';

function App() {
    return (
          <div className='App'>
        <h1> Redux Test </h1>

        <div>
          <button> + </button>
          {/* num */}
          <button> - </button>
        </div>
      </div>
    )
}

App.defaultProps = {
  num: 0 // component의 Props들의 기본 값을 지정한다. 
}
export default connect( // react-redux 모듈의 기능, store와 store의 state 정보를 가지고 온다. 
  (state) => ({  // 사용할 state를 가지고 온다. 
    num: state.test.num // state.storeName.stateName 으로 가지고 온다. 
  }),
  (dispatch) => ({ // 컴포넌트 안에서 사용할 Action 정보를 가지고 온다. 
    testAction: bindActionCreators(testAction, dispatch), // 인자값으로 store로부터 호출된 정보를 담는다. 
  })
)(App); // 현재 컴포넌트의 이름

• num: state.test.num 코드의 test는 반드시 modules/index.js에 combineReducers 함수의 인자로 담은 객체에 작성한 것과 같아야 한다.

test라고 작성한 이름과 같아야 한다.

• state 역시 test.js에서 작성한 initialState에 num 변수가 있기 때문에 가지고 올 수 있었다.

4-3. 컴포넌트에서 state 값 뿌려주기

// src/App.js

// 클래스형 컴포넌트의 경우 this.props 를 통해 num에 접근한다. 
<button> + </button>
　{ this.props.num }　
<button> - </button>

// 함수형 컴포넌트의 경우
function App(props) {
    return (
        <button> + </button>
       { props.num }　
      <button> - </button>
    )
}

initialState 값이 제대로 출력되고 있다.

4-4. 버튼을 조작했을 때 state 값 변경하기

컴포넌트에서는 Action을 인자로 받는 Reducer를 실행하면서 state 값 변경을 시도한다. 이를 위해 Action을 지정해주어야 한다.
다시, modules 디렉토리의 test.js로 돌아가 아래처럼 코드를 수정한다.

// src/modules/test.js
import { createAction, handleActions } from 'redux-actions'; 
// 컴포넌트 내에서 reducer 함수를 쓰기 위해 Acton을 만들어야 하므로, Action을 생성하고, 이를 다루는 함수를 redux-actions 모듈로부터 호출한다. 

const CHANGENUMBER = 'test/change_number'; 
// 대문자로 시작하는 변수에 Action에 대한 경로를 담는다. 이 경로값은 중복되지 않아야 한다. 

export const change_number = createAction(CHANGENUMBER); 
// 경로를 담은 변수를 createAction 함수의 인자로 넣는다. 
// 이제 외부에서 접근할 수 있도록 export한다. 


const initialState = {
    num: 0
}

export default handleActions({ 
      // handleActions의 인자로 들어가는 객체에 키가 된 CHANGENUMBER 상수. 
    [CHANGENUMBER] : (state, data) => { 
        let num = state.num;
        // 첫 번째 인자에 기존 state 데이터를 가지고 올 수 있는 값을 담는다.
        // 두 번째 인자에는 컴포넌트에서 reducer 함수를 실행할 때 전달받을 수 있는 데이터를 받는다. 

      if (data.payload.bool) {
            num += 1;
        } else {
            num -= 1;
        }

        return {
            ...state,   // 이 전개 연산자를 통해 Action 작동 시 모든 state가 초기화되는 것을 방지한다.
            num: num
        }


    }
}, initialState);

이제 컴포넌트에서 reducer 함수를 실행할 때 참조할 수 있는 Action이 만들어졌다. 컴포넌트로 다시 돌아가서,

// src/App.js
import React from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as testAction from './store/modules/test';

function App(props) {
      const _changeNumber = (bool) => {
      const { testAction } = props; // test store를 props로 호출
      testAction.change_number({'bool' : bool }) // test store의 change_number 경로로 전달
    }

    // 위 함수 실행 시 state  변화를 주는 reducer가 작동하고, 이때 참조되는 Action으로 test store에 정의된 change_number의 경로가 인자로 전달되며 num state가 변경된다. 

    return (
        <h1>Redux Test</h1>
      <div>
        <button onClick={() => {
          console.log('clicked');
          _changeNumber(true)
        } }>+</button>
        {props.num}
        <button onClick={() => _changeNumber(false)}>-</button>
    )

}


App.defaultProps = {
  num: 0
}
export default connect(
  (state) => ({  
    num: state.test.num 
  }),
  (dispatch) => ({ 
    testAction: bindActionCreators(testAction, dispatch), 
  })
)(App); 

이런 식으로 간단하게 리덕스 사용하는 방법을 알고, 적용해봤다.

요약

• store : 프로젝트에서 사용하는 동적 데이터가 담기는 일종의 중앙 저장소, 보관소(Globalized State)
• action : 무엇을 할지를 정의하는 부분. counter를 만든다고 한다면 숫자를 'Increment' 한다 했을 때 바로 그 'increment' 부분
• reducer : action 객체를 받았을 때, 이 데이터를 어떻게 바꿀지 그 방법을 정의하는 객체.
• dispatch : action 객체를 reducer에 전달하면서 실질적으로 이 과정이 일어나도록 execute 하는 부분

상태 변경은 아래 순서로 이루어진다.

1. dispatch로 action 객체를 보낸다.
2. reducer는 action 객체를 인자로 받아 상태를 변경한다.
3. 변경된 상태는 props로 전달받을 수 있다.

좀 더 간단하게는 Redux Toolkit을 사용하는 방법도 있다.

다음 번에는 여러 컴포넌트에 전역적으로 사용되는 data를 state로 관리하도록 리팩토링을 해봐야겠다.

출처

• Youtube
• Redux ToolKit