[자바스크립트] React 모듈 (Module)

React 모듈은(module)은 주로 컴포넌트들을 다른 파일에 분리하는데 사용됩니다. 모듈은 자체 변수범위(Scope)을 가지기 때문에 외부에서 사용할 것은 export로 내보내야 하고, 모듈을 사용하는 쪽에서는 export된 것 중에서 사용하고자 하는 것은 import로 지정해야 합니다.

React 모듈은 HTTP와 HTTPS를 통해서만 불러들일 수 있습니다. 로컬 파일시스템에서  file://로는 실행시킬 수 없습니다.

 

내보내기(export)

 

내보내기(export)는 변수, 상수, 심볼, 객체, 클래스를 모듈 밖에서 사용할 수 있도록 해줍니다. 모듈은 자체 scope을 가지므로 export 하지 않은 것은 외부에서 사용할 수 없습니다.

내보내기(export)는 명명된 내보내기(named export)와 기본 내보내기(default export)로 나누어 집니다.

하나의 모듈에 명명된 내보내기와 기본 내보내기가 모두 있을 수도 있고, 둘 중 한 종류만 있을 수도 있습니다.

 

1. 기본 내보내기(default export)

하나의 모듈에 default export는 하나만 존재합니다. 

 

// 선언과 동시에 내보냅니다.
export default name = "React";

 

// 선언 후 내보냅니다.
let name = "React";
export default name;

 

// 아래 코드는 에러가 발생합니다. 선언한 후에 export 해야 합니다.
export default let name = "React";

 

기본 내보내기(default export)를 사용할 때 선언과 동시에 내보내는 경우 명명된 내보내기와 같이 사용할 때 에러가 발생하는 경우가 있었습니다. 모든 조건을 알지 못할 경우 선언 후에 내보내는 방법을 사용하면 오류도 없고 가독성도 높아지므로 분리해서 사용하는 것을 추천합니다.

 

2. 명명된 내보내기(named export)

// 선언마다 export 하는 방법
export name = "React";
export function add(a, b) { return a + b; }

 

// 선언 후 export 하는 방법
let name = "React";
function add(a, b) { return a + b; }
export { name, add };

 

선언 후에 export할 때는 { } 로 둘러 싸야 합니다. 선언마다 export 하는 것과 선언 후에 export 하는 것 섞어서 사용할 수 있습니다.

 

가져오기(import)

 

모듈을 사용하기 위해서는 import 를 사용합니다. 모듈 내에서 다른 모듈을 import 할 수도 있습니다.

 

// moudle.js - 불러올 모듈 파일
let name = "React";
let add = (a, b) => a + b;
let sub = (a, b) => a - b;

export default name;
export { add, sub };

 

1. 기본 내보내기(default export)를 import 하기

default export로 내보낸 이름을 import할 때 아무 이름으로도 가져올 수 있습니다. 주의해야할 것이 명명된 내보내기를 import 하려 할 때 글자가 틀려서 없는 이름을 적으면, 자동으로 default export로 맵핑되어 버립니다.

 

// 같은 이름으로 import
import name from "./module.js";
console.log(name); // "React" 출력

// 다른 이름으로 import
import nm from "./mudule.js";
console.log(nm); // "React" 출력됨

 

2. 명명된 내보내기(named export)를 import 하기

 

// 중괄호를 사용해서 import 합니다. default도 함께 가져올 수 있습니다.
import name, { add, sub } from "./module.js";

console.log(add(3, 2)); // 5 출력됨
console.log(sub(3, 2)); // 1 출력됨

 

3. 별칭으로 명명된 내보내기 import하기

 

// 개별 항목을 별칭으로 import
import { add as ad } from "./module.js";
console.log( ad(3, 2) ); // 5 출력됨

// 전체를 객체로 import 하기
import * as op from "./module.js";
console.log( op.sub(3, 2) ) // 1 출력됨

 

4. 모듈의 위치

모듈의 위치 지정 부분이 모듈명만 사용하는 경우와 URL을 사용하는 경우가 있습니다. 모듈명만을 사용할 경우 위치는 node_modules 폴더 아래에 있고, URL을 사용하는 경우는 지정된 URL에 위치합니다.

 

// node_modules 폴더
import React, { Component } from "react";

// URL지정
import name, * as op from "./module.js";