src/App.tsx

import { Component } from 'react'; ------ ➊

class App extends Component { ----------- ➋
  render() { ---------------------------- ➌
    return <h1>Hello, Class Component!</h1>
  }
}
export default App; --------------------- ➍

➊ react 패키지에서 Component 클래스를 불러옵니다. Component는 리액트에서 제공하는 기본 컴포넌트 클래스입니다. 이 클래스를 상속하면 리액트 컴포넌트를 클래스 문법으로 정의할 수 있습니다.

➋ extends 키워드로 Component 클래스를 상속받습니다. 이렇게 하면 App 컴포넌트는 리액트의 기본 컴포넌트 기능을 사용할 수 있습니다.

➌ render() 메서드는 클래스 컴포넌트에서 꼭 필요합니다. 이 메서드는 화면에 보여줄 UI 요소를 반환하는 역할을 합니다. JSX 문법으로 작성한 <h1>Hello, Class Component!</h1>를 반환하므로 웹 브라우저 화면에는 해당 텍스트가 표시됩니다.