Class Component

클래스 컴포넌트를 사용하여 카운터 기능을 구현.

Counter.tsx
// React 라이브러리에서 Component 클래스를 가져옵니다.
import { Component } from "react";

// Counter 컴포넌트에서 사용될 props의 타입을 정의합니다.
// 여기서는 message라는 문자열 타입의 prop만을 가집니다.
type ConuterProps = {
  message: string;
};

// Counter 컴포넌트의 내부 상태(state)의 타입을 정의합니다.
// 여기서는 count라는 숫자 타입의 상태만을 가집니다.
type ConuterState = {
  count: number;
};

// Counter라는 클래스 컴포넌트를 정의합니다.
export class Counter extends Component<ConuterProps, ConuterState> {
  // Conponent 클래스는 두 개의 제네릭 타입을 받는다. CounterProps는 컴포넌트의
  속성의 타입을, CounterState는 컴포넌트의 상태의 타입을 나타낸다.
  // 컴포넌트의 초기 상태를 정의합니다. count는 초기값으로 0을 가집니다.
  state = {
    count: 0,
  };

  // 카운트 값을 증가시키는 이벤트 핸들러 함수를 정의합니다.
  handleClick = () => {
    // 현재의 state 값을 기반으로 새로운 state 값을 설정합니다.
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  // 컴포넌트의 렌더링 메서드입니다.
  render() {
  //클래스 컴포넌트에서 필수적으로 구현해야 하는 메서드 컴포넌트가
  화면에 어떻게 표시될지를 결정하는 React 요소들을 반환하는 것
    return (
      <div>
        {/* 클릭하면 카운트 값을 증가시키는 버튼 */}
        <button onClick={this.handleClick}>증가</button>
        {/* props로 전달받은 message와 현재의 카운트 값을 표시합니다. */}
        {this.props.message} {this.state.count}
      </div>
    );
  }
}