[React] 1씩 증감하는 함수 만들기

 

| Counter.js

import React from 'react'
import logo from './logo.svg'
import './App.css'
import './css/mystyle.css'
import my from './images/torikelly.png'
import MyName from './MyName'

class Counter extends React.Component{
    state = {
        number : 0,
    }
    handleIncrease = () => {
        this.setState({
            //number: this.state.number + 1; 세미콜론X
            number: this.state.number + 1
        })
    }//end

    handleDecrease = () => {
        this.setState({
        number: this.state.number -1
        })
    }//end

    render(){
        return(
           
            <div>
           <h2>Counter.js</h2>
                <p>값 : {this.state.number}</p>
                <button onClick={this.handleIncrease}>1증가</button> &nbsp;
                <button onClick={this.handleDecrease}>1감소</button>
            </div>
        );
    }
}

export default Counter;

 

| App.js

import React from 'react'
import './App.css'
import './css/mystyle.css'
import my from './images/torikelly.png'
import Counter from './Counter.js'
import MyName from './MyName'

export default class App extends React.Component{
  render(){
    return(
      <div>
          <Counter></Counter>
      </div>
    )//return end
  }//render end
}//class end

 

| 출력결과

 

| import

Counter 라는 이름으로 ./Counter.js 문서를 가져오겠다.

import Counter from './Counter.js' // 확장자 js 는 생략 가능

 

| App.js 는 index.js가 호출하고 있다.