Class 컴포넌트와 this

Class 컴포넌트의 구동 방식

설명을 위해 간소화한 예시로, 실제 구동방식과는 차이가 있다.

// Class를 정의합니다.
class ClassCounterPage {
  count = 10;

  onClickCountUp() {
    console.log("button의 count: ", this.count);
  }

  // render 안의 태그들이 실제로 화면에 그려지는 방식입니다. (설명을 위해 간소화한 예시로, 실제 구동방식과 차이가 있습니다.)
  render() {
    // button 태그를 생성합니다.
    const button = document.createElement("button");
    button.innerText = "카운트 Up";

    // onClick 함수는 EventListener에 연결해줍니다.
    button.addEventListener("click", this.onClickCountUp);

    // 만든 버튼을 화면에 추가합니다.
    document.body.appendChild(button);
  }
}

// 윈도우가 로드되면 실행됩니다.
window.onload = () => {
  // Class를 통해 인스턴스를 만들고 render를 통해 화면에 그려줍니다.
  const counter = new ClassCounterPage();
  counter.render();
};

위 코드를 실행하고 버튼을 클릭하면
count가 undefined로 출력된다.

주체에 따라서 this가 달라지기 때문이다.

위에서 의도한 this는 Class에서 적어준 count인데, 지금은 주체가 button이 되어 button에서 count를 찾게 된다.
button에는 count가 없기 때문에 undefined가 출력되는 것이다.

this를 Class로 명시해주자.

this를 Class로 명시하는 방법에는 두 가지 방법이 있다.

1) .bind(this)로 바인딩하기

Class의 this를 binding해줘서 이제 this는 button이 아닌 Class가 된다.

button.addEventListener("click", this.onClickCountUp.bind(this));

2) 화살표 함수 사용하기

화살표 함수에서는 this가 Class가 된다. this를 따로 binding할 필요 없음!

        onClickCountUp = () => { 
          console.log("button의 count: ", this.count);
        };