컴포넌트를 내보낼 때는 두 가지 방식 중 하나를 선택할 수 있습니다. export 키워드만 사용하면 컴포넌트를 불러오는 쪽에서 중괄호({})를 사용해 불러와야 합니다. 반면에 export default 키워드를 사용하면 중괄호 없이 바로 불러올 수 있습니다. 또한, export를 사용하면 하나의 파일에서 여러 컴포넌트를 내보낼 수 있지만, export default는 한 파일에서 하나의 기본 컴포넌트만 내보낼 수 있습니다.
import { App } from './App.tsx'; // export function App() { ... } 사용 시
import App from './App.tsx'; // export default function App() { ... } 사용 시
컴포넌트를 정의하고 내보내는 방식은 프로젝트 구조나 협업 스타일에 따라 달라질 수 있습니다. 하지만 초보자라면 먼저 export default 방식을 익히고, 필요할 때 export 방식도 함께 사용하는 것이 좋습니다. 이 책에서는 가독성과 사용의 일관성을 위해 export default 방식을 사용합니다.
● 다른 정의 방식
함수형 컴포넌트는 function 키워드를 사용한 함수 선언문 방식 외에도 함수 표현식이나 화살표 함수(arrow function)를 사용해 정의할 수도 있습니다.