React state 정의 및 차이점

React State 정의 차이점

// class fields 사용했을 경우

class Test extens Component {

state = {

number: 1

}

handleIncrease() {

    this.setState({

      number: this.state.number + 1

    });

  }

...

}

// constructor 사용했을 경우

class Test extens Component {

constructor(props) {

    super(props);

    this.state = {

          number: 1

        }

this.handleIncrease = this.handleIncrease.bind(this);

}

handleIncrease() {

    this.setState({

      number: this.state.number + 1

    });

  }

...

}

constructor 에서 super(props) 를 호출 한 이유는, 우리가 컴포넌트를 생성하며, Component 를 상속했으며, 여기에 constructor 를 작성하게 되면 기존의 클래스 생성자를 덮어쓰게 됩니다.(다시 구현을 함) 그렇기에, 리액트 컴포넌트가 지니고있던 생성자를 super 를 통하여 미리 실행하고, 그 다음에 우리가 할 작업 (state 설정) 을 해주는 것 입니다.(초기화 하는 과정이라고 생각 됨)

class fields , constructor 둘 다 사용할 경우 class fields(먼저 실행) > constructor(뒤에 실행)

constructor 사용 경우 this를 찾을 수 없게 되어 constructor 에서 state를 바인딩 시켜줘야 한다

참고 : https://velopert.com/3629

끘%$#$%!@$#!$#ㅜ ㅠㅠ