Javascript 의 import 와 export 마스터하기: default vs named

JavaScript에서 import와 export는 코드를 나눠서 작성하고, 

필요한 부분만 골라 쓸 수 있도록 해 줍니다.

export는 특정 기능이나 데이터를 다른 파일에서도 사용할 수 있게 해주고,

import는 필요한 기능이나 데이터를 다른 파일에서 가져와 사용할 수 있게 해 주지요.

이렇게 하면 코드를 여러 파일에 나눠서 관리할 수 있어, 보다 체계적이고 깔끔하게 코드를 작성할 수 있습니다.

 

1. Export (Named Export)와 import 

변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있게 하려면,

선언할 때 앞에 export 키워드를 붙여주면 됩니다.

이렇게 하면 해당 요소들을 내보내기 할 수 있어서,

다른 파일에서 import 해 가져다 사용할 수 있게 됩니다.

 

아래에서는 array 변수인 names, 상수인 API_NUM, 그리고 class 인 Profile 앞에,

export 키워드를 붙여주었서, export 해 주었습니다.

 

// test.js
export const names = ['lee', 'maison', 'hong'];
export const API_NUM = 2015123324;

export class Profile {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

 

위에서 test.js 모듈에서 여러 변수, 상수, 클래스를 export 하였는데요.

이제 이들을 import 해서 사용해 보겠습니다.

 

각각의 요소는 모듈의 이름(js파일명)으로 접근해야 하며,

import { <값 들의 이름> } from './test.js' 와 같은 형식으로 가져와주면 됩니다.

이렇게 이름을 붙여서 변수, 상수, 클래스 등을 import 하기 때문에, Named Export 라고도 합니다.

 

import { names, API_NUM, Profile } from './test';

console.log(names); 
console.log(API_NUM);
const myProfile = new Profile('John', 25);
console.log(myProfile.name);

 

 

예제를 하나 더 보겠습니다.

 

// Utils.js
export const add = (a, b) => a + b;
export const divide = (a, b) => a / b;

 

import는 아래와 같이 해주면 되겠지요.

 

import { multiply, divide } from './Utils';

 

2. default Export 와 import

2-1. Default Export vs Named Export

모듈에서 하나의 값만 export하는 경우 default 키워드를 사용할 수 있습니다.

이렇게 하면 import 할 때, 특정한 이름을 지정할 필요 없이 바로 접근이 가능해요.

이 방법은 주로 메인 컴포넌트나 단일 함수를 export할 때 유용합니다.

 

이렇게 default 키워드를 붙여서, 하나의 값만 export하는 방법을 Default Export 라고 하고,

이와 달리 default 키워드 없이 여러 값을 Export 한 것을 Named Export 라고 합니다.

 

아래에서는 defaultConfig 하나의 변수를 default 키워드를 붙여서 export 해 주었네요.

 

// config.js
const defaultConfig = {
  apiUrl: 'https://api.test.com',
  timeout: 3000,
  maxRetries: 3,
};

export default defaultConfig;

 

defaultConfig 모듈은 아래와 같이 import 해서 사용할 수 있습니다.

 

import defaultConfig from './config';

console.log(`API URL: ${defaultConfig.apiUrl}`);
console.log(`Timeout: ${defaultConfig.timeout}ms`);
console.log(`Max Retries: ${defaultConfig.maxRetries}`);

 

 

3. 이름 바꾸기 (Renaming)

import 나 export를 할 때, 모듈에서 가져온 함수나 컴포넌트의 이름을 변경할 수 있습니다.

예를 들어, 아래와 같이 multiply라는 함수를 export한 경우, 다른 이름으로 import해서 사용할 수 있어요. 

 

// mathUtils.js
export const multiply = (a, b) => a * b;

 

import를 사용할 때 as 키워드를 사용하면 가져온 함수나 변수의 이름을 변경할 수 있습니다. 

아래에서는, multiply 함수를 gobsem이라는 이름으로 바꾸어서 import 해 주었습니다.

 

// app.js
import { multiply as gobsem } from './mathUtils';
console.log(gobsem(2, 3)); // 결과: 6

 

4. 객체로 import 하기

하나의 모듈에서 export 된 여러개의 값이나 함수등을 하나의 객체로 import 해올수 있습니다.

아래와 같이 add와 subtract 를 export 하였다고 가정해 보겠습니다.

 

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

 

위의 함수들을 객체로 import 할 경우,

아래와 같이 "import * as "로 해 주면 됩니다.

 

// app.js
import * as math from './mathUtils';

console.log(math.add(3,4)); // 7
console.log(math.subtract(8,2)); // 6

 

 

5. import 및 export 의 위치

import와 export 문은 JavaScript 모듈의 어느 위치에 있어도 문제가 없습니다.

 

다만, import 문은 파일의 상단에 위치하는 것이 일반적이구요.

import된 모듈은 해당 모듈을 사용하는 코드보다 먼저 선언되어야 합니다.

 

export 문은 모듈의 하단에 위치하는 것이 일반적입니다. 이렇게 하면 모듈의 전체 코드를 살펴본 후 마지막에 어떤 부분들이 외부로 내보내지는지 한눈에 파악하기 쉽습니다. 예를 들어, 함수나 클래스를 정의한 후에 파일의 맨 아래에서 이들을 export하는 방식이 자주 사용됩니다.

 

이상으로 Javascript 에서 import 와 export 하는 방법에 대해서 정리해 보았습니다.