src/App.tsx

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

➊ App 컴포넌트를 함수형 컴포넌트로 선언합니다. 선언할 때 export default 키워드를 사용하면 이 컴포넌트를 다른 파일에서 쉽게 불러와 사용할 수 있습니다. 컴포넌트의 이름은 파스칼 케이스를 따라 작성합니다.

➋ return 문 안에는 리액트에서 사용하는 JSX 문법을 작성합니다. 여기서는 Fragment 단축 문법인 <>...</>를 사용해 <h1> 요소를 감쌉니다. Fragment는 여러 요소를 감쌀 때 불필요한 HTML 태그를 추가하지 않고 그룹화할 수 있게 해줍니다.

코드를 저장한 뒤 애플리케이션을 실행하면 다음 결과를 확인할 수 있습니다.