3.2.1 클래스 컴포넌트

클래스 컴포넌트(class component)는 ES6에서 도입된 클래스 문법을 사용해 컴포넌트를 정의합니다. 클래스 컴포넌트는 리액트의 Component 클래스를 상속받아 생성하며, 반드시 render() 메서드를 포함해야 합니다. 그리고 render() 메서드 안에서 컴포넌트가 화면에 보여줄 UI를 반환합니다.

클래스 컴포넌트의 기본 구조는 다음과 같습니다.

import { Component } from 'react';

class [컴포넌트_이름] extends Component {
  // JSX를 반환하는 render() 메서드 
  render() {
    return (...)
  }
}
export default [컴포넌트_이름];

클래스 컴포넌트를 간단하게 만들어 보겠습니다. 1장에서 생성한 리액트 애플리케이션에서 src 폴더의 App 컴포넌트(App.tsx)를 열고 내용을 모두 지운 후 다음과 같이 코드를 작성합니다.