ES6(ECMAScript 2015) - 모듈 - 2 - export와 import

ES6(ECMAScript 2015) - 객체 리터럴 확장 - 2 - 프로토타입 축약 — ES6(ECMAScript 2015) – 모듈 – 2 – export와 import

ES6(ECMAScript 2015) – 모듈 – 2 – export와 import

쉬운 목차

소제목: export와 import란 무엇인가요?

자, ES6에서 소개된 모듈 시스템에는 export와 import라는 두 가지 키워드가 있습니다. 이 키워드들은 코드를 모듈로 구성하고, 모듈 간의 데이터, 함수, 클래스 등을 공유하기 위해 사용됩니다. export는 모듈에서 내보내는 것을 의미하며, import는 다른 모듈에서 내보낸 것을 가져오는 것을 의미합니다. 예시를 통해 이해해보겠습니다.

예시:

우선, 한 모듈에서 다른 모듈로 변수를 내보내고 가져오는 과정을 살펴봅시다.

내보내는 모듈(exporting module):

// 모듈 파일에서 내보낼 변수, 함수, 클래스 등을 작성합니다.
export const name = 'Alice';

export function sayHello() {
  console.log('안녕하세요!');
}

export class Person {
  constructor(name) {
    this.name = name;
  }
}

// 기본(default) 내보내기
// 모듈에서 기본적으로 내보낼 항목은 하나만 설정할 수 있습니다.
export default function sayGoodbye() {
  console.log('안녕히 가세요!');
}

가져오는 모듈(importing module):

// 다른 모듈에서 변수, 함수, 클래스 등을 가져올 때는 import 키워드를 사용합니다.
import { name, sayHello, Person } from './exportingModule';

console.log(name); // 'Alice'를 출력합니다.
sayHello(); // '안녕하세요!'를 출력합니다.

const person = new Person('Bob');
console.log(person.name); // 'Bob'을 출력합니다.

export 키워드를 이용하여 변수 name, 함수 sayHello, 클래스 Person을 내보내고, import 키워드를 이용하여 해당 모듈에서 내보낸 항목들을 가져옵니다.

소제목: export와 import의 활용 방법은 무엇인가요?

export와 import는 모듈 간의 코드 공유를 용이하게 만들어줍니다. 다양한 방식으로 활용할 수 있으며, 예시를 통해 살펴보겠습니다.

예시:

단일 항목 내보내기 (Named exports)
```
export const name = 'Alice';
export function sayHello() {
console.log('안녕하세요!');
}
```
위의 코드에서는 name 변수와 sayHello 함수를 개별적으로 내보냅니다. 가져올 때는 항목의 이름을 동일하게 사용하여 가져올 수 있습니다.
```
import { name, sayHello } from './exportingModule';
```

console.log(name); // ‘Alice’를 출력합니다.
sayHello(); // ‘안녕하세요!’를 출력합니다.


2. 기본 항목 내보내기 (Default export)
```javascript
export default function sayGoodbye() {
  console.log('안녕히 가세요!');
}

위의 코드에서는 sayGoodbye 함수를 기본(default)으로 내보냅니다. 가져올 때는 원하는 이름으로 가져올 수 있습니다.

import goodbye from './exportingModule';

goodbye(); // '안녕히 가세요!'를 출력합니다.

별칭을 사용한 내보내기와 가져오기 (Aliased exports and imports)
```
function sayGoodbye() {
console.log('안녕히 가세요!');
}
```

export { sayGoodbye as bye };

import { bye as goodbye } from ‘./exportingModule’;

goodbye(); // ‘안녕히 가세요!’를 출력합니다.


위의 코드에서는 `sayGoodbye` 함수를 `bye`라는 이름으로 내보내고, `goodbye`라는 이름으로 가져옵니다. 이렇게 별칭을 사용하여 모듈 간의 호환성을 유지할 수 있습니다.

### 소제목: export와 import를 사용할 때 주의해야 할 점은 무엇인가요?

자, `export`와 `import`를 사용할 때 주의해야 할 몇 가지 사항이 있습니다.

1. 모듈 파일은 반드시 확장자 `.js`를 가지고 있어야 합니다. 그렇지 않으면 모듈로 인식되지 않습니다.
2. `export`와 `import` 구문은 반드시 최상위 수준에서 사용되어야 합니다. 즉, 조건문이나 반복문 내에서 사용할 수 없습니다.
3. `export`는 반드시 변수, 함수, 클래스, 또는 기본(default)으로 내보낼 항목 앞에 위치해야 합니다.
4. `import` 구문에서 가져올 항목의 이름은 반드시 중괄호(`{}`)로 감싸야 합니다. 기본(default)으로 내보낸 항목은 중괄호를 사용하지 않습니다.
5. `import` 구문에서 가져올 모듈의 경로는 상대 경로나 절대 경로로 지정해야 합니다.
6. `export`와 `import`는 ES6 모듈 시스템에서 지원되는 기능이므로, 모든 브라우저에서 지원되지 않을 수 있습니다. 따라서, 브라우저에서 사용하기 위해서는 번들러(bundler) 도구를 사용하여 ES6 모듈을 ES5 형식으로 변환해야 할 수도 있습니다.

요약하자면, `export`와 `import`를 사용할 때는 파일 확장자, 위치, 구문 규칙 등을 유의해야 합니다. 그리고 브라우저 호환성을 고려하여 번들러를 활용하는 것이 중요합니다.

이상으로 ES6의 모듈 시스템에서의 `export`와 `import`에 대해 알아보았습니다. 이를 통해 모듈 간의 데이터와 기능을 쉽게 공유할 수 있으며, 코드의 구조화와 유지 보수에 도움이 되는 강력한 기능임을 알 수 있습니다. 재미있고 유용한 프로그래밍을 위해 모듈 시스템을 자유롭게 활용해보세요!

소제목: export와 import란 무엇인가요?

소제목: export와 import의 활용 방법은 무엇인가요?

답글 남기기 응답 취소