3.3.2 컴포넌트 정의

컴포넌트를 정의하는 방법을 살펴보겠습니다. 3.2.2절에서 살펴봤지만, 매우 중요한 내용이므로 여기서 다시 정리하겠습니다.

● 함수형 컴포넌트 정의

함수형 컴포넌트는 다음과 같이 함수를 사용해 컴포넌트를 정의합니다.

src/App.tsx

export default function App() {
  return (
    <>
      <h1>Hello, Function Component!</h1>
    </>
  );
}

이를 함수 선언문 방식이라고 하며, 컴포넌트는 function 키워드로 정의하고 JSX를 return 문 안에 작성합니다. 그리고 이 컴포넌트를 다른 파일에서 사용할 수 있도록 내보내기(export)합니다.