[ReactJS] Module이란 무엇일까?

프론트엔드 개발 올인원 패키지 with React Online. Webpack 강의 내용을 기반으로 정리한 내용입니다.

---

Module이란

Module은 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져있는 형태를 의미함 

 

1) 한 파일에 쓰여진 코드를 여러 파일로 관리할 수 있으며

2) 다른 모듈로부터 특정 기능을 가져오거나, 다른 모듈이 특정 기능을 참조할 수 있게 함 

 

모듈화를 하면 코드 재사용성이 증가하며, 

모듈을 기준으로 코드 내용을 구조적으로 확인가능하기 때문에 코드의 관리가 편해진다. 

모듈화를 위해서는 키워드, 모듈 시스템, 모듈의 기준이 필요하다.

 

Module의 표준 

1. CommonJS (node.js)

2. ESM 

 

Module의 키워드

1. 내보내기

- 내보낼 값을 객체 안에 넣고 객체를 통해 한 곳으로 내보내기

- 내보낼 값을 개별적으로 지정, 개별적으로 내보내기 

 

2. 가져오기

- { 함수 }

---

Module의 예시 (CommonJS)

require(모듈의 경로)

1. 객체 형식으로 

1) 내보내기 (mathUtil.js)

module.exports = {
	PI, //상수
    getCircleArea //함수
}

2) 가져오기 (index.js)

const mathUtil = require('./mathUtil');
const result = mathUtil.getCircleArea(2);

2. 개별적 으로 

1) 내보내기 (mathUtil.js)

exports.PI= PI;
exports.getCircleArea = getCircleArea;

 

2) 가져오기 (index.js)

const { getCircleArea } = require('./mathUtil');
const result = getCircleArea(2);

---

Module의 예시 (ESM)

1) 명령어 

 - 설치 

npm install esm

- 실행  

esm 말고 다른 module도 실행할 수 있도록 함 

node -r esm index.js

2) export

-  데이터를 객체 안에 담아서 내보내기 (mathUtil.js)

export const PI = 3.14;
export const getCircleArea = r => r*r*PI;

//혹은
export {
	PI,
	getCircleArea
}

- 가져오기 (index.js)

import { getCircleArea } from './mathUtil';

3) export default

-  내보내기(mathUtil.js)
모듈 한 개에 개체 한 개만 있을 경우에 주로 사용함 

export default{
	PI,
	getCircleArea
}

//혹은 
export default Math;

- 가져오기 (index.js)

//index.js
import MathUtil from './mathUtil';

const result = MathUtil.getCircleArea(2);