[React] 클래스형 컴포넌트로 클릭카운터 만들기

step-1 클래스형 컴포넌트 기본틀

import './App.css';
import {Component} from 'react';

class App extends Component{ 
  constructor(props){
    super(props) 
    this.state={ 

    }
  }
  render(){
    return(
      <div id="wrap">
      </div>
    )
  }
}

export default App;

render는 화면을 그리는것. 

 

step-2 카운터될 화면 띄우기 

import './App.css';
import {Component} from 'react';

class App extends Component{
  constructor(props){ 
    super(props) 
    this.state={ 
      num:0
    }
  }

  render(){
    return(
      <div id="wrap">  
        <h1>{this.state.num}</h1>
      </div>
    )
  }
}

export default App;

숫자증감가 나타낼 숫자0

step-3 버튼 만들기

render(){
    return(
      <div id="wrap">
        <h1>{this.state.num}</h1>
        <button onClick={this.increase}>+</button>
        <button onClick={this.decrease}>-</button>
      </div>
    )
  }

step-4 이벤트함수 만들기 

 increase=()=>{
 	alert('증가!')
  }
  decrease=()=>{
	alert('감소!')
  }

클릭하면 경고창 뜨는지 확인하기 . 

경고창 잘 뜨면 이벤트 확인되었으니 증가, 감소 구현하기. 

아래처럼 원래의 자바스크립트 문법으로 하면 먹히질 않음. 

  increase=()=>{
   this.state.num=this.state.num + 1 
   //이렇게하면 화면에 그려지지 않음 직접접근 하면안됨.
  }

state 상태를 바꿔줘야하는 setState 를 써줘야함. 

  increase=()=>{
    this.setState({
      num:this.state.num+1
    })
  }
  decrease=()=>{
    this.setState({
      num:this.state.num-1
    })
  }

이렇게 state 상태를 바꿔주면 잘 구현됨. 

 

최종화면

 

 

전체코드 

import './App.css';
import {Component} from 'react';
//react 모듈에서 Component클래스를 가져온다. 

class App extends Component{ //상속 모든 클래스형
  //App 클래스가 Components 클래스를 상속받는다. 
  //App 클래스를 Component 클래스를 이용해서 확장한다. 
  //extend : 확장하다. 
  //App:자식 클래스, Components:부모 클래스 
  constructor(props){ //생성자
    super(props) //상위생성자, 부모생성자
    this.state={ //컴포넌트가 가지는 상태값, 자바로치면 멤버변수
      num:0
    }
  }
  increase=()=>{
    //this.state.num=this.state.num + 1 이렇게하면 화면에 그려지지 않음 직접접근 하면안됨.
    this.setState({
      num:this.state.num+1
    })
    //setState -> render
  }
  decrease=()=>{
    // alert('감소!')
    this.setState({
      num:this.state.num-1
    })
  }

  render(){
    return(
      <div id="wrap">
        <h1>{this.state.num}</h1>
        <button onClick={this.increase}>+</button>
        <button onClick={this.decrease}>-</button>
      </div>
    )
  }
}

export default App;