src/App.tsx
export default function App() { ----- ➊
return ( -------------------------- ➋
<>
<h1>Hello, Function Component!</h1>
</>
);
}
➊ App 컴포넌트를 함수형 컴포넌트로 선언합니다. 선언할 때 export default 키워드를 사용하면 이 컴포넌트를 다른 파일에서 쉽게 불러와 사용할 수 있습니다. 컴포넌트의 이름은 파스칼 케이스를 따라 작성합니다.
➋ return 문 안에는 리액트에서 사용하는 JSX 문법을 작성합니다. 여기서는 Fragment 단축 문법인 <>...</>를 사용해 <h1> 요소를 감쌉니다. Fragment는 여러 요소를 감쌀 때 불필요한 HTML 태그를 추가하지 않고 그룹화할 수 있게 해줍니다.
코드를 저장한 뒤 애플리케이션을 실행하면 다음 결과를 확인할 수 있습니다.