es6: Import and export(가져오기 및 내보내기)

ES6문법중 Export와 Import with chatGPT

 

ES6의 import와 export는 JavaScript는 JavaScript 모듈화 시스템의 일부로, 코드를 파일 간에 분리하고 재사용하기 쉽게 해줍니다. 각각의 기능을 살펴보겠습니다.

 

1.export

export는 다른 파일에서 사용할 수 있도록 특정 변수, 함수, 클래스 등을 내보내는 역할을 합니다.

 

기본 내보내기(default export)

파일당 하나의 기본 내보내기를 할 수 있습니다.

//mymodule.js
export default function sayHello(){
	console.log("Hello");
}

 

명명된 내보내기 (named export)

하나의 파일에서 여러 항목을 내보낼 수 있으며, 이름을 지정하여 내보냅니다.

//myModule.js
export const greeting = "Hello!";
export function sayHello(){
	console.log(greeting);
}

 

2. import

import는 다른 파일에서 내보낸 모듈을 가져와서 사용하는 역활을 합니다.

 

가져오기 ( default import)

default export를 가져올 때는 이름을 자유롭게 지정할 수 있습니다.

//main.js
import sayHello from './myModle.js';
sayHello(); //"Hello!"

 

명명된 가져오기 (named import)

named export를 가져올 때는 내보낸 이름과 동일하게 가져와야 합니다.

//main.js
import { greeting, sayHello } from './myModule.js';
console.log(greeting); //"Hello!"
sayHello(); //"Hello!"

 

모든 항목 가져오기 (import * as)

모든 내보낸 항목을 객체 형태로 가져올 수 있습니다.

//main.js
import * as myModule from './myModule.js';
console.log(myModule.greeting); //"Hello!"
myModule.sayHello(); //"Hello!"

 

이렇게 import와 export를 사용하면, 코드를 깔끔하게 분리하고 유지보수를 쉽게 할 수 있습니다.