리액트로 간단한 기능 구현 해보기

'state'를 설정해 'props'로 받아 간단한 함수 기능 구현을 해보자.

먼저 리액트 환경설정을 한다.

npx create-react-app practice_1

• 구현하고자 하는 기능
  1) '+', '-' 버튼을 만들어 기본값에 더하고 빼보기
  2) 각각 버튼 클릭 시 폰트 컬러 바꾸기

// Main.js

import React, { Component } from 'react';
import Inner from './Inner';

class main extends Component {
    constructor() {
        super();
        this.state = {
            count: 0,
            color: false 
        }
    }

    Increment = () => {
          this.setState({ count: this.state.count + 1, color: true});
    }

    Decrement = () => {
        this.setState({ count: this.state.count - 1, color: false });
    }

    render() {

        return (
            <div>
                <Inner count={this.state.count} 
                       Increment={this.Increment} 
                       Decrement={this.Decrement} 
                       color={this.state.color}/>
            </div>
        );
    }
}

export default main;

// Inner.js
import React, { Component } from 'react';
import "./Inner.css" // Inner.css 받기

class Inner extends Component {
    render() {
        return (
            <div>
             <div>{this.props.count}</div> // 기본값: 0
             <button onClick={this.props.Increment} // Main.js에서 받은 함수 props로 받기 
                     className={ this.props.color ? "blue" : "red" }>
                     Increment
             </button>
             <button onClick={this.props.Decrement} 
                     className={this.props.color ? "red" : "blue" }>
                     Decrement
             </button>
            </div>
        );
    }
}

export default Inner;

// Inner.css

.blue {
  color: rgb(54, 54, 189); // blue
}

.red {
  color: rgb(197, 20, 20); // red
}