[JavaScript] JavaScript Modules

자바스크립트에서 모듈은 단순히 파일입니다.

모듈의 목적은 더 작은 파일로 작업할 수 있는 더 많은 모듈식 코드를 갖는 것이며, 이 코드를 가져와(import) 내보냄(export)으로써 구축하는 앱을 더 사용자 정의할 수 있고 더 구성 가능한 부품을 가질 수 있습니다.

모듈은 별도의 파일에서 단일 기능만큼 간단할 수 있습니다.

function addTwo(a, b) {
    console.log(a + b);
}

위 코드만 포함된 addTwo.js라는 파일이 있다고 가정해 보겠습니다.
이 파일을 자바스크립트 모듈로 만드는 방법은 무엇입니까?
자바스크립트 모듈로 만들기 위해 해야 할 일은 내보내기 구문(export)을 사용하는 것입니다.

 

Module Exports

 

자바스크립트에서 모듈을 내보내는 방법은 여러 가지가 있습니다.
이 과정에서 자바스크립트 모듈의 가져오기 및 내보내기가 수행되는 모든 방법에 대해 설명할 다양한 구문상의 차이점은 나열되어 있지 않지만, 다음은 이 과정에서 다루는 몇 가지 예입니다.

일반적으로 자바스크립트에서 모듈을 내보내는 방법은 두 가지가 있습니다:
1. 기본 내보내기 사용 (default export)
2. 명명된 내보내기 사용 (named export)

 

1. Default Exports

자바스크립트 모듈당 하나의 기본 내보내기를 가질 수 있습니다.
위의 addTwo.js 파일을 예로 사용하면 기본 내보내기를 수행하는 두 가지 방법이 있습니다:

export default function addTwo(a, b) {
    console.log(a + b);
}

따라서 위의 예에서는 addTwo 함수 선언 앞에 export default 키워드를 추가하는 것입니다.

다음은 다른 방법의 구문입니다:

function addTwo(a, b) {
    console.log(a + b);
}

export default addTwo;

 

2. Named Exports

명명된 내보내기는 지정된 자바스크립트 파일의 특정 부분만 내보내는 방법입니다.
기본 내보내기와 대조적으로 원하는 만큼 모든 자바스크립트 파일에서 항목을 내보낼 수 있습니다.
즉, 디폴트 수출은 하나만 있을 수 있지만 원하는 만큼의 네임드 수출이 가능합니다.

예:

function addTwo(a, b) {
    console.log(a + b);
}

function addThree(a, b, c) {
    console.log(a + b + c);
}

addTwo 함수와 addTwo 함수를 모두 명명된 내보내기로 내보내려면 다음과 같은 방법을 사용할 수 있습니다:

export function addTwo(a, b) {
    console.log(a + b);
}

export function addThree(a, b, c) {
    console.log(a + b + c);
}

또 다른 방법은 다음과 같습니다:

function addTwo(a, b) {
    console.log(a + b);
}

function addThree(a, b, c) {
    console.log(a + b + c);
}

export { addTwo, addThree };

 

Importing Modules

 

자바스크립트로 모듈을 내보낼 때와 마찬가지로 여러 가지 방법으로 가져올 수 있습니다.
정확한 구문은 모듈을 내보내는 방법에 따라 다릅니다.

 

한 폴더에 두 개의 모듈이 있다고 가정해 보겠습니다.
첫 번째 모듈은 addTwo.js이고 두 번째 모듈은 mathOperations.js입니다.

addTwo.js 모듈을 mathOperations.js 모듈로 가져오려고 합니다.

기본으로 내보낸 모듈 가져오기
addTwo 함수를 기본 모듈로 내보내는 앞의 예를 생각해 보겠습니다:

// addTwo.js module:
function addTwo(a, b) {
    console.log(a + b);
}

export default addTwo;

mathOperations.js 모듈로 가져오려면 다음 구문을 사용할 수 있습니다:

import addTwo from "./addTwo";

// the rest of the mathOperations.js code goes here

따라서 mathOperations.js 파일 내에서 가져온 코드를 사용할 이름을 mathOperations.js 파일에서 Import 키워드로 시작할 수 있습니다. 그런 다음 .js 확장자 없이 키워드를 입력하고 마지막으로 파일 위치를 입력합니다.

addTwo 함수가 명명된 내보내기인 경우 기본 addTwo 내보내기의 위 가져오기를 다른 가져오기 구문과 차이가 있습니다:

import { addTwo } from "./addTwo";

// the rest of the mathOperations.js code goes here

 

여기서 본 예제는 React 앱 개발에서 다양한 모듈의 import, export를 처리하는 방법의 핵심입니다.