export와 export default의 차이

export와 export default의 차이

1. export와 export default의 차이

• 코딩을 하다보면, export를 사용하는 경우와 export default를 사용하는 경우가 있습니다. 이 둘의 차이는 뭘까요?

 

2. export

• export는 모듈에서 하나 이상의 변수, 함수 or 객체를 내보내는 데 사용합니다.
• 여러 개의 이름이 지정된 항목을 모듈에서 내보낼 수 있습니다.
• 예를 들어 봅시다.

    →  이 경우, aaa와 bbb를 내보내고 다른 모듈에서 가져올 때, 이름으로 가져올 수 있습니다.

// 항목 1
const aaa = 'aaa';

// 항목 2
function bbb() {
    return 'bbb';
}

export {aaa, bbb};

/*
이렇게도 사용할 수 있음
export const foo = 'foo';
export function bar() {
    return 'bar';
}
*/

 

    → 이러한 방식으로 { } 안에 변수 or 함수를 넣고, 해당 경로를 지정해 주면 됩니다.

import {aaa, bbb} from './module';

 

3. export default

• export default는 모듈의 기본 내보내기로 하나의 변수, 함수 or 객체를 내보내는 데 사용됩니다.
• 각 모듈은 하나의 기본 내보내기만 가질 수 있습니다.
• 예를 들어 봅시다.

    → aaa를 내보내고 다른 모듈에서 가져올 때, 원하는 이름을 지정할 수 있거나 중괄호를 생략해서 가져올 수 있습니다.

const ccc = 'ccc';

export default ccc;

 

    → 이러한 방식으로 중괄호를 생략하고, 해당 경로를 지정해서 가져오면 됩니다.

import ccc from './module';

 

4. 정리하며

• 지금까지 export와 export default의 차이점에 대해 알아보았습니다.
• 각 상황에 따라 알맞게 사용하는 것을 명심합시다!