3.3.3 컴포넌트 추가
리액트 애플리케이션은 여러 컴포넌트 파일이 결합되어 하나의 화면을 구성합니다. 따라서 화면에 여러 컴포넌트를 함께 렌더링하는 방법을 익히는 것이 중요합니다.
웹 브라우저 화면에 표시되는 시작점은 App 컴포넌트입니다. 여기에 새로운 컴포넌트를 하나 만들어 함께 표시해 보겠습니다. App.tsx 파일을 다음과 같이 수정합니다.
src/App.tsx
function Header() { ----- ➊
return (
<>
<h1>Header!</h1>
</>
);
}
export default function App() {
return (
<>
<Header /> ----- ➋
<h1>Hello, Function Component!</h1>
</>
);
}