React - 클래스형 컴포넌트2

클래스형 컴포넌트의 state와 setState

이번에는 count component를 class 컴포넌트로 만들어보자.

💡componenet에서 custom method를 만드는 방법
class내부에 함수를 선언하는 것을 말한다.
render()와 같은 역할을 한다. render는 컴포넌트가 자체적으로 가지고 있는 것이다.

우리가 커스텀 메소드를 만드는 방법은

 handleIncrease () {
   console.log('increase');
 }
 handleDecrease () {
   console.log('decrease');
 }

와 같이 만들며 만약 위에 만든 커스텀 메소드를 작동하게 하고 싶다면

 handleIncrease () {
   console.log('increase');
 }
 handleDecrease () {
   console.log('decrease');
 }

 <button onClick={this.handleIncrease}>+1</button>
 <button onClick={this.handleDecrease}>-1</button>

위와 같이 이용한다.

💡 만약 console.log(this)가 있다면

handleIncrease () {
  console.log(this);
  console.log('increase');
}
handleDecrease () {
  console.log('decrease');
}

<button onClick={this.handleIncrease}>+1</button>
<button onClick={this.handleDecrease}>-1</button>

위와 같이 this가 들어가게 된다면 컴포넌트 인스턴스 자신을 가르켜야 하는데, 이 함수를 특정 이
벤트에 연결해주는 순간 이 함수와 this의 연결이 사라지게 되어 this가 무엇인지 모르게 된다.
그러므로 위의 버튼을 누르게 되면 'undefined'가 나오게 된다.
이렇게 되는 것은 우리가 만든 메소드를 버튼들이 이벤트를 등록하게 되는 과정에서 각 메소드와 컴
포넌트 인스턴스의 관계가 끊기게 되기 때문이다.

💡이를 해결하는 방법은?
위의 문제를 해결하는 방법은 총 3가지가 있다.

1. 컴포넌트에 생성자 함수인 constructor를 이용해서 함수를 미리 바인드 해주는 것이다.

• 이 작업을 해주게 되면 '이 함수에서 this를 가르키게 된다면 constructor에서 사용하는 this를 가르키게 해라' 라는 의미가 된다.

2. 커스텀 메소드를 선언할 때 화살표 함수 문법을 사용해서 작성하는 것이다.

💡여기서 주의 할 점은
state는 무조건 객체 형태여야 한다.
함수형 컴포넌트에서 useState를 사용할 때 객체이거나 배열이거나 숫자일 수 있지만, 위와 같은 상황에서는 무조건 객체여야 한다.

💡setState를 함수형 업데이트로 할 때

  handleIncrease = () => {
    // this.setState({
    //   counter: this.state.counter + 1
    // });
    //setState도 함수형 업데이트가 가능하다.
    this.setState((state) => ({
      counter: state.counter + 1
    this.setState((state) => ({
      counter: state.counter + 1
    this.setState((state) => ({
      counter: state.counter + 1
    this.setState((state) => ({
      counter: state.counter + 1
    }));
  };
//위는 버튼을 눌를 시 +4씩 된다.

   handleDecrease = () => {
    this.setState({
      counter: this.state.counter - 1
      counter: this.state.counter - 1
      counter: this.state.counter - 1
      counter: this.state.counter - 1
    });
  };
//위는 -4씩 될 것 같지만 -1씩 된다.

위와 같은 결과가 나오는 것은 setState를 한다고 해서 상태가 바로 바뀌는 것이 아니다.
단순히 상태를 바꾸는 함수가 아니라 설정한 상태로 바꿔주는 함수로 이해해야 한다.
성능적인 이유로 리액트는 상태가 바로 업데이트 되지 않고 비동기적으로 업데이트가 일어나기 때문이다.
그러므로 바로 상태가 바뀌게 하려면 함수형 업데이트를 해야 한다.