기본 모듈 import, export 정리하기

[주인장]

모듈 이해하기 

- 모듈을 사용하는 js 파일은 확장자로 .mjs 를 사용해야한다.

export

: ECMAScript 모듈 시스템에서 사용되며, 모듈에서 변수, 함수, 클래스 등을 다른 모듈에서 사용할 수 있도록 내보내는데 사용되는 키워드

1. 개별 변수 또는 함수 내보내기 - export 사용 

// 개별 변수 내보내기 

export const number = 10;

// 개별 함수 내보내기

export function method() {

  return "hello world";

}

2. 별칭을 사용한 개별 내보내기

export { internalVariable as myVariable, internalFunction as myFunction };

3. 기본 내보내기

// 개별 변수 내보내기

const number = 20;

// 개별 함수 내보내기

function method() {

  return "hello world";

}

// 대표 모듈 1개만 내보내기 가능 

export default number;

export { method }; // 나머지는 { } 을 이용 

import

: 다른 모듈에서 내보낸 변수, 함수, 클래스 등을 가져와 사용할 때 사용하는 키워드

1. 개별 변수 또는 함수 가져오기

import { number, method } from './module1.mjs';  

console.log(number); // 10

const result = method();

console.log(result); // hello world

2. 모든 내용 가져오기

import * as module1 from './module1.mjs';

console.log(module1.number); // 10

const result = module1.method();

console.log(result); // hello world

3. 기본 가져오기

import number from './module2.mjs';

import {method} from './module2.mjs';

console.log(number); // 20

const result = method();

console.log(result); // hello world