화면에는 세 개의 제목 텍스트가 순서대로(Header! → Hello, Function Component! → Footer!) 표시됩니다.

그림 3-5 Main과 Footer 컴포넌트 추가 결과

이처럼 컴포넌트를 한 파일에 정의하고 사용할 수도 있습니다. 하지만 여러 컴포넌트를 한꺼번에 App.tsx 내부에 작성하는 방식은 유지보수나 가독성 측면에서 바람직하지 않습니다.

● 컴포넌트 파일 분리

앞에서 만든 Header, Main, Footer 컴포넌트는 모두 App.tsx 파일 안에 작성했습니다. 하지만 실무에서는 컴포넌트를 파일 단위로 분리해 관리하는 것이 일반적입니다. 이렇게 하면 각 컴포넌트를 독립적으로 관리할 수 있어 코드의 가독성과 유지보수성이 높아집니다.