➊ Header라는 함수형 컴포넌트를 정의하고 return 문 안에 JSX를 작성해 화면에 표시할 내용을 구성합니다. 이 예제에서는 <h1>Header!</h1> 요소를 반환하므로 웹 브라우저에는 ‘Header!’라는 제목이 표시됩니다.

➋ App 컴포넌트 내부에서 Header 컴포넌트를 HTML 태그처럼 <Header /> 형태로 사용합니다. 리액트는 이 태그를 보고 Header 컴포넌트를 실행하고, 그 결과로 생성된 JSX를 App 컴포넌트 내에 함께 렌더링합니다.

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

그림 3-4 Header 컴포넌트 추가 결과

앞에서 Header 컴포넌트를 추가한 것처럼 같은 방식으로 Main과 Footer 컴포넌트도 추가할 수 있습니다.