클래스형(Class) 컴포넌트와 함수형(Functional) 컴포넌트

지금까지 자바스크립트, 타입스크립트를 학습하면서 아래 형식을 기본적으로 사용하였다.

 

export default function 함수명 () {
 // 자바스크립트
	return ();
 // HTML   
    }
    
    // 함수형 컴포넌트

예전에는 함수형 컴포넌트에서 상태를 관리할수가 없었는데, Hook의 출현으로 상태 관리가 가능해졌다. useEffect도 없었으니 렌더링 전후로 어떤 작업을 하고 싶어도 할수가 없었다. 그래서 사용한 것이 클래스형 컴포넌트이다.

 

 

그래도 클래스형 컴포넌트를 활용할 기회가 생길 수 있으니, 어떻게 사용하는지 알아보자

 

1.  사용 방법 :  함수형과 다르게 클래스형은 함수와 변수를 사용할때 const, let, function 등을 사용하지 않습니다.

class Monster {
  power = 50;
  attack(): void  {
    console.log("공격합니다!!");
  }
}

2.  상속과 오버라이딩 : 미리 선언한 함수에 기능을 추가하거나 다시 정의할 수 있습니다. 

// 클래스 상속 : 기존 클래스에 기능을 추가해서 만든 클래스
class SuperMonster extends Monster {
  run(): void {
    console.log("도망가자!!");
  }

  // 오버라이딩: Monster의 메소드를 다시 정의해서 덮어씌운다.
  attack(): void {
    console.log("슈퍼 몬스터 필살기!!");
  }
}

const monster = new Monster();
console.log(monster.power); // 50
monster.attack(); // 공격합니다!!

const supermonster = new SuperMonster();
console.log(supermonster.power); // 50
supermonster.attack(); // 슈퍼 몬스터 필살기!!

 

class형 컴포넌트 사용 예시

import { Component } from "react";

export default class ClassCounterPage extends Component {
  // extends를 사용하여 리액트 기능 중 하나인 Component를 상속 받습니다.
  state = {
    count: 5,
  };

  // 화살표 함수로 변경하여 this 사용
  onClickCountUp = (): void => {
    // 변경전 onClickCountUp(): void {
    console.log(this.state.count);
    this.setState({
      count: 1,
    });
  };

  // render 작성 (정해진 규칙)
  render(): JSX.Element {
    return (
      <>
      {/* this는 class 자기자신을 뜻합니다. */}
        <div>{this.state.count}</div>
        
        {/* 직접 바인딩할 때는 onClick={this.onClickCouter.bind(this)} 라고 적어주셔야 합니다. */}
        <button onClick={this.onClickCountUp}>카운트 올리기!!</button>
      </>
    );
  }
}

 

this

함수형에서는 보이지 않던 this가 자주 사용된 것을 볼 수 있다.

이때 this 는 선언했던 변수를 함수에 가져오는 방법이라고 생각하면 좋을 것 같다.

 

그러나 this를 어디서 실행하느냐에 따라 변화하는 이슈가 있다 (동적 this)

 

변수를 가져오는 함수를 선언할때 함수표현식으로 선언하면 정상적으로 이전의 this를 받아오지 못한다. (this 자체가 함수로 변경되는 이슈가 생김 ex) onClickCounter 클릭시 this가 onClickCounter로 변경됨

 

그래서 함수를 선언할때 화살표 함수로 선언하거나 .bind(this)를 사용하여 this를 class로 고정해야한다.