javascript의 export import에 대하여 알아봅시다.

JavaScript의 export와 import는 모듈 시스템의 핵심 기능으로, 코드를 여러 파일로 나누어 관리하고 재사용성을 높이는 데 사용됩니다. 혼자서 개발 연습하시다가 실무로 들어가거나 사이즈가 큰 프로젝트를 만들때는 반듯이 필요한 기능이므로 작 숙지하고 넘어가셔야 합니다.

---

export

export는 특정 값을 다른 파일에서 사용할 수 있도록 내보낼 때 사용합니다. 내보낼 수 있는 항목에는 변수, 함수, 클래스 등이 포함됩니다.

1. Named Export (이름 있는 내보내기)

하나의 파일에서 여러 값을 내보낼 수 있습니다. 이름을 지정해서 내보내기 때문에 가져올 때 같은 이름을 사용해야 합니다.

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;

2. Default Export (기본 내보내기)

한 파일당 하나의 기본 값을 내보낼 수 있습니다. 이름 없이 내보내며, 가져올 때 원하는 이름으로 사용할 수 있습니다.

// logger.js
export default function log(message) {
  console.log(message);
}

---

import

import는 다른 파일에서 내보낸 값을 가져올 때 사용합니다.

1. Named Import (이름 있는 가져오기)

내보낼 때 사용된 이름과 동일한 이름으로 가져옵니다. 중괄호 {}를 사용합니다.

// main.js
import { add, subtract } from './utils.js';

console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2

2. Default Import (기본 가져오기)

기본으로 내보낸 값은 중괄호 없이 가져옵니다. 가져올 때 이름을 자유롭게 지정할 수 있습니다.

// main.js
import log from './logger.js';

log('Hello, World!'); // Hello, World!

3. Named Import와 Default Import 함께 사용

이 두 가지 방식을 동시에 사용할 수 있습니다.

// main.js
import log, { add, subtract } from './utils.js';

log('Logging from utils');
console.log(add(1, 2)); // 3

4. Import as (이름 변경)

가져오는 항목의 이름을 변경할 수도 있습니다.

// main.js
import { add as addition } from './utils.js';

console.log(addition(2, 3)); // 5

5. Import All (모두 가져오기)

모듈의 모든 내보낸 항목을 한 객체로 가져옵니다.

// main.js
import * as utils from './utils.js';

console.log(utils.add(2, 3)); // 5
console.log(utils.subtract(5, 3)); // 2

---

사용 시 주의사항

1. 파일 경로: import할 때 파일 경로를 정확히 지정해야 합니다.
   • 상대 경로: ./ 또는 ../로 시작
   • 절대 경로: 프로젝트 설정에 따라 다름
2. 확장자: .js 확장자를 명시하는 것이 권장됩니다.
3. 동기/비동기: import는 기본적으로 동기적으로 동작하지만, import() 함수를 사용하면 동적으로 비동기 import도 가능합니다.

---

예제: 모듈 파일 분리와 사용

utils.js

export const greet = (name) => `Hello, ${name}!`;
export const farewell = (name) => `Goodbye, ${name}!`;

app.js

import { greet, farewell } from './utils.js';

console.log(greet('Alice')); // Hello, Alice!
console.log(farewell('Alice')); // Goodbye, Alice!

---

이처럼 export와 import를 사용하면 코드 구조를 모듈화하여 관리하기 쉽고 재사용성이 높아집니다.

 

도움이 되셨으면 좋겠습니다.