더북(TheBook)

컴포넌트를 내보낼 때는 두 가지 방식 중 하나를 선택할 수 있습니다. 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)를 사용해 정의할 수도 있습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.