[React #14] 모듈 시스템 / Common JS / ES Module

01. 모듈 시스템

• 로그인이나 회원가입 등 복잡한 기능들을 하나의 파일에만 작성하면 복잡하고 생산성이 떨어지기 때문에 기능 별로 파일을 분리함
• 모듈 : 기능 별로 나뉘어진 각각의 자바스크립트 파일들
• 모듈 시스템 : 모듈을 생성하고, 불러오고, 사용하는 등의 모듈을 다루는 다양한 기능을 제공하는 시스템
• 대표적 자바스크립트의 모듈 시스템 : Common JS, ES Module

 

02. Common JS (CJS)

 

01) math 모듈을 내보내기

 

📑 math.js

- 객체(module)를 만들고 안에 프로퍼티로 내보내고 싶은 값들을 넣어주기

function add(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

module.exports = {
  add: add,
  sub: sub,
};

 

02) 내보낸 math 모듈을 index 모듈로 가져오기

 

📑 index.js

- 내장함수 require : 모듈의 경로를 인수로 전달하면 값을 반환해줌

const moduleData = require('./math');
console.log(moduleData); // { add: [Function: add], sub: [Function: sub] }
console.log(moduleData.add(1, 2)); // 3
console.log(moduleData.sub(2, 5)); // -3

 

- 객체의 구조 분해 할당 이용

const { add, sub } = require('./math');

 

 

03. ES Module(ESM)

 

01) 패키지 설정 파일 수정

 

📑 package.json

- 아래에 코드 추가하기

{
  "type": "module"
}

• 앞으로 이 패키지에서 ES Module 시스템을 사용하겠다는 뜻

 

02) math 모듈을 내보내기

 

📑 math.js

- export 뒤에 객체를 리터럴로 생성해서 내보내고 싶은 값을 담아주기

 

방법 ① : 한번에 모아서 보내기

function add(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

export { add, sub };

 

방법 ② : 각각 보내기

export function add(a, b) {
  return a + b;
}

export function sub(a, b) {
  return a - b;
}

• 함수 선언문 앞에 export 붙여주기

방법 ③ : default로 보내기

export default function multiply(a, b) {
  return a * b;
}

• default : 현재 모듈을 대표하는 기본값으로 설정

 

03) 내보낸 math 모듈을 index 모듈로 가져오기

 

📑 index.js

- import 뒤에 중괄호로 가져오고 싶은 값을 담고, from에는 가져올 경로 명시

 

방법 ① : 기본

import { add, sub } from './math.js';
console.log(add(1, 2)); // 3
console.log(sub(2, 5)); // -3

• 경로에는 꼭 확장자 포함해서 명시하기

방법 ② : 동일한 경로라면 한번에 받기

import mul, { add, sub } from './math.js';

 

방법 ③ : default로 보낸 값 받기

import mul from './math.js';

console.log(mul(3, 3)); // 9

 

💡 ES Module일 때 CommonJS 사용했을 경우

ReferenceError: require is not defined in ES module scope, you can use import instead

• ES Module과 CommonJS는 함께 사용할 수 없음
• CommonJS 코드를 ES Module로 바꿔줘야 함

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'