➍ App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냅니다. 그러면 다른 곳에서 App 컴포넌트를 불러와 사용할 수 있습니다. 예를 들어 main.tsx 파일에서는 import App from './App';과 같은 형태로 임포트해 렌더링할 수 있습니다.

생성한 클래스 컴포넌트를 실행해 봅시다. 터미널을 열고 프로젝트 루트 폴더(여기서는 vite-react)에서 다음과 같이 서버를 실행합니다.

npm install
npm run dev

터미널에 표시된 로컬 주소(http://localhost:5173 등)를 Ctrl (맥OS에서는 command)을 누른 상태로 클릭하면 웹 브라우저가 열립니다. 화면에 다음과 같이 render() 메서드 안 텍스트가 렌더링되어 표시됩니다.

그림 3-2 클래스 컴포넌트 생성 결과 확인

TIP   클래스 컴포넌트에 관해 더 자세히 알고 싶다면 리액트 공식 문서(https://react.dev/reference/react/Component)를 참고하세요.