React강좌3 - Redux 1. Redux 설치 및 기본 컴포넌트 작성

 

 

1. Redux 설치

npm install --save redux react-redux

2. 3개의 컴포넌트 작성 (src/components 폴더에 작성)

Value.js : 멍청이

Control.js : 멍청이

Counter.js : 똑똑이

 

(1) Value.js

import React, { Component, PropTypes } from 'react';

const defaultProps = {
    number: -1
};

class Value extends Component {
    render() {
        return (
            <div>
                <h1>{this.props.number}</h1>
            </div>
        );
    }
}

Value.defaultProps = defaultProps;

export default Value;

(2) Control.js

import React, { Component, PropTypes } from 'react';

function createWarning(funcName) {
    return () => console.warn(funcName + ' is not defined');
}
const defaultProps = {
    onPlus: createWarning('onPlus'),
    onSubstract: createWarning('onSubstract'),
    onRandomizeColor: createWarning('onRandomizeColor')
}


class Control extends Component {
    render() {
        return (
            <div>
                <button onClick={this.props.onPlus}>+</button>
                <button onClick={this.props.onSubstract}>-</button>
                <button onClick={this.props.onRandomizeColor}>Randomize Color</button>

            </div>
        );
    }
}

Control.defaultProps = defaultProps;

export default Control;

(3) Counter.js

import React, { Component, PropTypes } from 'react';
import Value from './Value';
import Control from './Control';

class Counter extends Component {   
    render() {
        return (
            <div>
                <Value />
                <Control />
            </div>
        );
    }
}

export default Counter;

3. App.js

import React, { Component } from 'react';
import Counter from './components/Counter';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App" >
        <Counter />
      </div>
    );
  }
}

export default App;