[React] Module, import, export

1. 모듈(Module)

React에서 모듈이란 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져있는 형태를 의미한다. 모듈 내에는 함수, 변수, 클래스, 인스턴스 등이 있고 다른 모듈에 있는 값을 불러오거나(import) 내부에 있는 값을 외부로 내보낼 수 있다(export).

2. export

변수, 함수, 클래스 앞에 export 키워드를 붙여서 모듈의 기능을 외부에서 사용할 수 있도록 내보낸다. 모듈의 종류와 상황에 따라 export, exports, export default 등의 방식을 사용한다.

3. import

export로 내보낸 모듈을 가져오는 기능을 담당한다.

4. 모듈의 종류

모듈의 종류로는 CommonJs와 EcmaScript(ES) 모듈이 있는데, 두 가지 모듈에 대해 알아보자.

1.1 CommonJs 모듈

CommonJS 모듈은 module.exports 및 export를 사용해서 내보내기를 할 수 있고, require() 함수를 사용해서 가져올 수 있다. 아래 코드를 통해서 확인해보자.

//moduleA.js
const A_var1 = "Module A var1";
const A_fun1 = function() {
    console.log("A_fun1() 실행");
};
module.exports = {
    A_var1,
    A_fun1
};

//moduleB.js
exports.B_var1 = "Module B var1";
exports.B_fun1 = function() {
    console.log("B_fun1() 실행");
};
module.exports.B_var2 = "Module B var2";
module.exports.B_fun2 = function() {
    console.log("B_fun2() 실행");
};

//index.js
const moduleA = require("./moduleA");
console.log(moduleA);
console.log(moduleA.A_var1);
moduleA.A_fun1()
console.log("");

//구조 분해 할당을 이용해서 필요한 것만 사용
const {A_var1, A_fun1} = require("./moduleA");
console.log(A_var1);
A_fun1()
console.log("");
const moduleB = require("./moduleB");
console.log(moduleB);

1.2 ES(EcmaScript) 모듈

ES 모듈은 export default와 export를 사용해서 내보내기를 할 수 있고 import를 사용해서 가져올 수 있다. CommonJs 모듈 대신 ES 모듈을 사용하도록 package.json 파일에 아래 코드를 추가해줘야 한다.

'type': "module"

아래 예제를 통해 export가 가능한 case를 확인해보자. moduleA.js, moduleB.js 파일을 생성하고 아래와 같이 작성 후, index.js 파일에서 import를 실행해보자.

//moduleA.js
const var1 = "value1";
const func1 = function(){
    console.log('func1 실행');
};

export default{
    var1,
    func1
};

//moduleB.js
export const var1 = "value1";
export const func1 = function(){
    console.log("func1 실행");
};
const func_default = funtion(){
    console.log("func default 실행");
}

//index.js
import moduleA from './moduleA.js';
console.log(moduleA);
console.log(moduleA.var1);
moduleA.func1();

import func_default, { var1, func1 } from './moduleB.js';
func_default();
console.log(var1);
func1();