[JavaScript] export default와 export의 차이

아래와 같은 코드가 있습니다.

// Profile.tsx
export default function Profile() {
    ...
}

// Card.tsx
const Card = ...;
const CardHeader = ...;
const CardFooter = ...;
const CardTitle = ...;
const CardDescription = ...;
const CardContent = ...;

export { Card, CardHeader, CardFooter,
    CardTitle, CardDescription, CardContent }

Profile 컴포넌트를 export 할 때는 export default를 사용하고, Card에 관련된 const들을 export 할 때는 export를 사용하네요.

단순히 보면 파일에서 export 할 대상이 단일 대상이면 export default, export 할 대상이 두 개 이상이 되면 export를 사용하는 것 같습니다.

이유가 뭘까요? 단일 대상을 export 할 때도 export default 가 아닌 export를 써도 상관 없지 않을까요?

import Profile from '@/components/Profile';
import { Card } from '@/components/utils/Card';

이와 관련해서 위와 같은 상황도 맞닥뜨립니다.

왜 Profile 컴포넌트는 중괄호 없이 import 할 수 있고, Card는 중괄호로 감싸야하는 걸까요?

이들이 구분된 이유와 적절한 사용 환경을 따져봅시다.

---

1. export (유명 내보내기):

• 하나의 모듈에서 여러 값을 내보낼 수 있습니다.
• 내보낼 때, 중괄호 {}를 사용하고 정확한 이름을 명시해야 합니다.
• 모듈에 여러 함수, 컴포넌트 또는 변수가 있을 때 유용합니다.

// 예를 들어, MyModule.js 파일에서
export const MyComponent = () => {/* ... */};
export const anotherComponent = () => {/* ... */};

// 가져올 때
import { MyComponent, anotherComponent } from './MyModule';

1. export default (기본 내보내기):

• 각 모듈은 하나의 기본 내보내기만 가질 수 있습니다.
• 기본 내보내기를 가져올 때는 중괄호를 사용하지 않고 원하는 이름으로 지정할 수 있습니다.
• 모듈이 하나의 주요 기능을 중심으로 할 때 유용합니다.

// 예를 들어, MyDefaultModule.js 파일에서
const MyComponent = () => {/* ... */};
export default MyComponent;

// 가져올 때
import AnyNameYouWant from './MyDefaultModule';

export - JavaScript | MDN