3주차 : 리액트-입문-count 만들기(클래스형)

배운 것

1) 컴포넌트 안에 constructor 를 안쓰고
state ={} 이렇게만 써도 문법을 변환해주는 도구가 알아서 변환해주는구나

2) state={}안에 있는 값이 객체여서 그걸 바꿔주고 싶다면, 하나만 쏙 바꾸는 건 안되고 전체를 수정하는 방식으로 해줘야 하는구나.
그래서 스프레드 문법을 쓰는 것, (맨 처음에 전체 복사를 만들고, 특정 객체키 값을 써주고)

ex) this.setState({
updateMe : {...this.state.updateMe ,
toggleMe : !this.state.updateMe.toggleMe}
})

3) (잘 이해안되었음) 비동기라서, 여러번 작업하려면 함수형으로 써주는게 맞을때가 있음

ex1) this.setState({
number : this.state.number+1
})

ex2) this.setState(state =>({
number: this.state.number+1
}))

Count.js

import React, { Component } from 'react';

class Count extends Component {

    constructor(props) {
        super(props);
        this.state={
            number:0
        } //state = {} 이렇게 바로 써도 오류안남. 바벨 때문에 
       
    }
    
    plus=()=> {
        this.setState({
            number:this.state.number+1
        }) //1)화살표 함수로 작성시 bind(this)로 해줄 필요 없음. 
   }
    render() {
        
        return (
            <div>
                <h1>{this.state.number}</h1>
                <button
                onClick={ this.plus }
// 2) 클릭하면 실행하게 만들려는 함수 이름을 {} 중괄호 안에
//써주면 끝 
                  >+1</button>
                <button
                onClick={()=>{
                    this.setState({
                        number:this.state.number-1
                    })
                }}
                >-1</button>
            </div>
        );
    }
}

export default Count;