[React] onClick을 활용하여 버튼을 누르면 값이 변경되는 코드 작성하기

✔ onClick

- NumberState.js

import React from "react";

class NumberState extends React.Component {
    
    constructor(props) {
        super(props);

        this.state = {
            number: 0
        }

        // 이 코드를 적어줘야 에러가 안 뜨고 값이 올라감
        this.onClickPlus = this.onClickPlus.bind(this)
        this.onClickMinus = this.onClickMinus.bind(this)
    }

	// 클릭했을 때 값이 증가하는 버튼
    onClickPlus() {
        this.setState({number: this.state.number + 1})
    }

	// 클릭했을 때 값이 감소하는 버튼
    onClickMinus() {
        this.setState({number: this.state.number - 1})
    }
    
    render() {
        return (
            <>
                <h1>{this.state.number}</h1>
                <button onClick={this.onClickPlus}>🍟🌭🍔</button>
                <button onClick={this.onClickMinus}>🥒🥬🥦</button>
            </>
        )
    }
}

export default NumberState;

반응형

▫ App.js

import './App.css';
import NumberState from './state/NumberState';

function App() {


  return (
    <>
      <NumberState />
    </>
  );
}

export default App;

 

 

 

🔅 onClickPlus , onClickMinus 를 따로 나누지 않고 onClickHandle 로 한번에 구현할 수도 있다.

import React from "react";

class NumberState extends React.Component {
    
    constructor(props) {
        super(props);

        this.state = {
            number: 0
        }

        // // 이 코드를 적어줘야 에러가 안 뜨고 값이 올라감
        this.onClickHandle = this.onClickHandle.bind(this)
    }

    onClickHandle(num) {
        this.setState({number: this.state.number + num})
    }
    
    render() {
        return (
            <>
                <h1>{this.state.number}</h1>
                <button onClick={() => this.onClickHandle(1)}>🍟🌭🍔</button>
                <button onClick={() => this.onClickHandle(-1)}>🥒🥬🥦</button>
            </>
        )
    }
}

export default NumberState;

 

따로 바인딩 하지 않고 더 간단하게 코드를 바꾸는 방법은

onClickHandle = (num) => {
    this.setState({number: this.state.number + num})
}

 

이렇게 람다식 구조로 바꿔주면 된다.

 

▫ 결과

완성

증가 버튼을 눌렀을 때 

 

감소 버튼을 눌렀을 때