리액트에서는 다른 파일에 있는 컴포넌트를 사용할 때 import 문을 사용합니다.
형식
import 컴포넌트_이름 from '파일_경로';
파일 경로는 상대 경로로 작성합니다. 상대 경로는 현재 파일이 있는 위치를 기준으로 다른 파일의 위치를 나타내는 방식입니다. 즉, import 문법을 사용하는 컴포넌트 파일의 위치를 기준으로 불러오는 컴포넌트 파일의 위치를 작성합니다. 상대 경로에서 ./는 현재 파일이 위치한 폴더를 나타내고 ../는 상위 폴더(한 단계 위)를 나타냅니다. 예를 들어, ./components/Header는 App.tsx가 위치한 src 폴더를 기준으로 그 하위 폴더인 components 안 Header.tsx를 가리킵니다.
파일 경로에서 확장자(.tsx)는 생략 가능합니다. 즉, ./components/Header.tsx 대신 ./com ponents/Header만 작성해도 됩니다.
작성한 코드를 저장하고 실행하면 이전과 동일하게(그림 3-5) 3줄의 텍스트를 화면에 출력합니다.