소개

이 기사에서는 React + Redux를 사용하여 카운트 앱을 만들고 싶습니다.
아래가 완료되어 있는 전제로 이야기를 진행해 나가므로, 설치되어 있지 않은 분은 실시해 주세요.

Node.js 설치

패키지 관리자 yarn 설치

creat-react-app 설치

참고 : h tps:// 퀵했다. 작은 m/rspm 하라다 7645/있어 MS/25C496 감히 87973b c7 아 5

1. 프로젝트 만들기

먼저 모든 디렉토리로 이동하여 create-react-app 명령으로 프로젝트를 만듭니다.

$ create-react-app countApp

실행 후 아래와 같은 메시지가 표시되면 OK입니다.

Initialized a git repository.

Success! Created countApp at /Users/******/countApp

작성한 프로젝트 아래로 이동하여 아래의 start 명령을 실행합니다.

$cd countApp
$yarn start

실행 후 브라우저가 시작되고 다음 화면이 표시되면 OK입니다.

2. 필요한 패키지 설치

만든 프로젝트 아래로 이동합니다.
이번에는 redux , react-redux 의 2개의 패키지를 사용하므로, yarn을 사용해 인스톨 합니다.

$cd countApp
$yarn add redux, react-redux

3. Redux로 카운트 앱 구현

이번에는 다음과 같은 폴더 구성으로 카운트 앱을 구현합니다.

.
 ├──  node_modules
 ├──  public
 ├──  src
      ├── actions
          └── index.js
      ├── components
          └── App.js
      ├── reducers
          ├── index.js
          └── count.js  
      ├── index.js        
      └──  serviceWorker.js 
 ├── index.js
 ├── yarn.lock
 ├── package.json
 └── README.md

우선, actions/index.js 를 작성해 갑니다.
여기에서는 액션의 정의와 액션 크리에이터를 작성해 갑니다.

이번에는 카운트의 값을 state로 관리합니다. state의 상태를 변경하는 액션은,
카운트를 늘리거나 줄이는 2개밖에 없기 때문에, 작성하는 액션은 2개가 됩니다.

actions/index.js

//Action定義
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";

//Action Creater(Action Createrを呼び出すことで、stateの更新が行われる)
export const increment = () =>({
    type : INCREMENT
});

export const decrement = () =>({
    type : DECREMENT
});

그런 다음 reducers/count.js 및 reducers/index.js를 만듭니다.count.js에서 실행한 action에 따라 상태 정보를 업데이트합니다.

reducers/count.js

import {
    INCREMENT,
    DECREMENT,
} from '../actions';

const initialize = { value : 0 };
export default (count = initialize, action) => {
    switch(action.type){
        case INCREMENT:
            return { value : count.value + 1 };
        case DECREMENT:
            return { value : count.value  - 1 };
        default:
            return count;
    }
}

reducers/index.js

import { combineReducers } from 'redux';
import count from './count';

export default combineReducers({count});

그런 다음 index.js 에서 store를 만들고 Component에 Redux를 사용할 수 있도록 Provider 로 Counter 를 래핑합니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './components/Counter';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import reducer from './reducers';
import * as serviceWorker from './serviceWorker';


const store = createStore(reducer);

//Provider（供給する）でラップすることで、stateの情報を共有することが可能
ReactDOM.render(
    <Provider store={store}>
        <Counter />
    </Provider>, 
    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();

마지막으로, 컴퍼넌트의 작성을 해 갑니다.

components/Counter.js

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from '../actions';

class Counter extends Component {
  render(){
    return (
      <React.Fragment>
        <div>
          カウント値 : {this.props.value}
        </div>
        <div>
          <button onClick={this.props.increment}>+</button>
          <button onClick={this.props.decrement}>-</button>
        </div>
      </React.Fragment>
    );
  }
}

//reduxで管理しているState情報をPropsで扱えるようにする
const mapStateToProps = state => ({ value : state.count.value});

//Action関数をPropsで扱えるようにする
const mapDispatchToProps = ({increment, decrement});

//componentとRedux Storeを接続する
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

4. 카운트 앱을 움직이자.

yarn start로 움직이자!

$cd countApp
$yarn start

아래와 같은 화면이 표시되면 OK입니다.
+버튼을 눌렀을 때 카운트 값이 증가하고 -버튼을 누를 때 카운트 값이 줄어들면 OK입니다.



다음 번에는,
React+Redux로 만드는 메모 앱