[JavaScript-68] 모듈 export, export default

(1) export의 의미

 

말 그대로, 내보낸다는 의미입니다.

뭘 내보내냐? 변수, 함수 등을 내보냅니다. 

즉, 다른 파일에서도 현재 파일의 함수나 변수를 불러와서 사용할 수 있게 내보내겠다는 의미입니다. 

 

(2) export하는 법1: 선언문 바로 옆에 export써주기

export let brand = 'benz';
let model = 'E220';

export function carPrinter(){
    console.log(`brand: ${brand}, model: ${model}`);
    };

자, 가장 원초적인 방법은, 내보내고 싶은 변수나 함수의 선언부 맨 앞에 export를 써주는 것입니다.

이 문법은 하나의 파일 내에서 원하는 것들만 선택적으로 내보낼 때 사용하면 되겠네요!

 

(3) export하는 법2: 파일 마지막 줄에 export한 번에 해주기

그런데, 위의 방식대로 대상들을 내보내면 어떤 문제가 생길까요?

하나의 파일 안에 변수나 함수가 정말 많으면, 나중에 내가 무엇을 내보내고 무엇을 내보내지 않았는지 확인하기 번거롭습니다.

 

그래서, 내보내고 싶은 아이들만 맨 마지막에 export해주는 방법이 있어요.

위의 코드를 이 방식대로 수정해보면, 

let brand = 'benz';
let model = 'E220';

function carPrinter(){
    console.log(`brand: ${brand}, model: ${model}`);
    };
    
export { brand, carPrinter };

이렇게, export { 내보낼 대상 }; 을 파일의 맨 마지막에 써주면 된답니다!

 

(4) export하는 법3: 파일 마지막 줄에 export default 해주기

자 일단, export default의 의미는, 하나의 값만을 내보내겠다~ 하는 겁니다.

예를 들어,

let title = 'hi';
let name = 'lee';
let age = 20;

export default title;

이런 식으로요. 

딱 하나의 값만을 추출할 수 있죠.

그런데, 특이한 점이, export default { 대상, 대상, 대상 .... }; 도 가능해요.

 

아니, 조금 전에는 하나의 값만 내보낼 수 있다더니! 

당황하셨죠?

자, 이 부분을 잘 이해하셔야 합니다. 

export { name, age };

이 코드는, 나중에 파일에서 불러올 때 그냥 각각을 변수나 함수로 불러오는 것입니다. 

export default { name, age };

그런데, deafult가 붙으면, {name, age}는 하나의 값으로 취급받아야 합니다.

즉, 객체가 됩니다. 

정확히는, {name: name, age: age}의 형태를 가진 객체가 됩니다. 

따라서, 나중에 import로 불러올 때, 변수가 아닌 객체로 접근해야 한다는 것입니다. 

 

import는 다음 강의에서 다룰 생각이었는데, 간단히만 설명하면, 

무언가를 불러온다는 의미입니다. 

이제, import를 사용하여 deafult 키워드와 함께 객체로 추출된 요소들을 불러오고 접근하는 방식을 보여드릴게요.

import moduleA from './index.js';

//추출했던 객체는 이름을 moduleA로 설정, 그 중 name프로퍼티에만 접근
console.log(moduleA.name);

자, deafult로 내보낸 객체의 이름은 어딨냐 하실 수 있는데요,

객체의 이름은 우리가 import를 해올 때 정해줍니다. 

저는 moduleA라고 정했어요.

 

그럼, 우리가 내보냈던 파일은 name과 age 두 개의 프로퍼티를 가진 객체였죠?

이제 여기서 name속성에 접근하려면, name만 가져오는게 아니라, 객체이기 때문에

moduleA.name으로 접근해야 한다는 거죠.

 

export와 export default의 차이, 이해가 가시나요?