[JS] 모듈 내보내기(export), 가져오기(import)

export와 import

ES6(ECMAScript 2015)에서 도입된 모듈 시스템의 기능으로, 코드를 여러 파일로 나누어 재사용성과 유지보수를 개선하기 위해 사용한다. 이를 통해 한 파일에서 정의된 함수, 객체, 클래스 등을 다른 파일에서 사용할 수 있다.

 

---

 

export로 내보내기

사용방법은 선언부 앞에 export 붙이면 된다. 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다.

// data.js

export const questions = [
  {
    number: '01',
    question: '곧 크리스마스! 회사에서 크리스마스 파티 스텝을 모집한다는데?',
    choices: [
      { text: '파티 스텝은 못하지ㅎ...<br>(그래도 파티는 재밌겠다 히히)', value: 'i' },
      { text: '재밌겠다!<br>○○한테 같이 지원하자고 해야지~', value: 'e' }
    ]
  },
  {
    number: '02',
    question: '해외 출장이 잡혔다!<br>전날 잠들기 전 나는?',
    choices: [
      { text: '짐 다 챙겼고 일찍 자야지~', value: 's' },
      { text: '다 챙겼겠지?<br>여분 옷을 좀 더 챙길까..(뒤척뒤척)', value: 'n' }
    ]
  },
]

 

위 코드에서  "export const questions"은 배열을 questions 이라는 이름으로 다른 스크립트로 내보낸다는 뜻이다.

 

 

 

export의 종류

Named Export (이름 내보내기)

여러 값(변수, 함수, 클래스)을 각각 이름을 지정하여 내보낼 수 있다. 내보낸 이름을 가져오는 쪽에서도 동일한 이름을 사용해야 한다.

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

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

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

// 별칭 사용할 수 있음
import { add as sum } from './math.js';

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

 

 

 

Default Export (기본 내보내기)

파일당 하나의 기본값만 내보낼 수 있다. 가져오는 쪽에서 이름을 자유롭게 지정한다.

// utils.js
export default function greet(name) {
    return `Hello, ${name}!`;
}

// main.js
import greet from './utils.js';
console.log(greet('Alice')); // Hello, Alice!

 

 

 

혼합 사용

Named Export와 Default Export를 한 파일에서 혼합하여 사용할 수 있다.

// shapes.js
export const square = (x) => x * x;
export default class Circle {
    constructor(radius) {
        this.radius = radius;
    }
    area() {
        return Math.PI * this.radius * this.radius;
    }
}

// main.js
import Circle, { square } from './shapes.js';

const circle = new Circle(5);
console.log(circle.area()); // 78.54
console.log(square(4)); // 16

 

 

 

import 사용법

기본 사용법은 아래와 같다.

// default
import multiply from './math.js';

// 이름 명시해서 사용한 경우
import { add, subtract } from './math.js';

 

import 사용 시 as를 이용해 별칭을 사용할 수도 있다.

import { add as sum, subtract as diff } from './math.js';