수코딩의 조언
리액트 애플리케이션에서는 컴포넌트 파일을 보통 src 폴더 하위에 작성합니다. 개발자에 따라 src/components 폴더를 만들어 컴포넌트를 정리하는 경우가 많습니다. 이 책에서는 App.tsx를 제외한 모든 컴포넌트는 src/components 폴더 아래에 작성합니다.
컴포넌트를 파일 단위로 분리해 보겠습니다. 그림 3-6과 같이 src 폴더에 components 폴더를 추가하고 그 안에 Header.tsx, Main.tsx, Footer.tsx 파일을 만듭니다.
그림 3-6 추가한 폴더와 파일 구조
각 파일에 해당 컴포넌트를 옮겨 작성합니다. App.tsx 파일에서는 각 컴포넌트를 불러와서 사용(import)해야 합니다. App.tsx에서 해당 컴포넌트를 불러오려면 각 컴포넌트 파일에서 export default 키워드를 사용해 컴포넌트를 내보내야 합니다.