[2019.04.17] CommonJS란?

개념은 간단하다. '.js' 파일 간의 어떻게 의존성을 가지게 할지 정해주는 것이다.

우선 commonJS라는 개념이 존재하는 이유는, 자바스크립트를 범용적으로 모듈화를 높이기 위함!

ES6 리액트 기준으로만 설명

// test1.js

function MSG1(){
  console.log('1');
}
function MSG2(){
  console.log('2');
}

export {MSG1, MSG2}

 

 위 코드를 보면, test1.js에서 MSG1, MSG2의 함수를 export 한다. export는 다른 곳에서 쓸 수 있게 내보내 주는 것.

export 키워드 뒤에는 내 보낼  함수 혹은 변수명을 {}괄호로 묶어줘서 보낸다. 이름을 꼭 맞춰주어야 한다.

 

// test2.js

import {MSG1, MSG2} from './test1'

MSG1(); // '1'

 

test2.js  파일에서 test1.js에서 내보냈던 함수 두개를 가져오는데, import 키워드를 쓰고 뒤에 해당 함수명을 가져온다.(중괄호 사용은 jsx문법) 뒤에 from 키워드를 쓰고 해당 함수의 파일 경로를 적어준다.

그러면 위와 같이 함수를 사용할 수 있다.

파일 경로와 함수 및 변수명이 맞아야 한다. 단, export시에 딱 하나만 넘겨줄 경우 빼고!

 

# export default

// test1.js

function MSG1(){
  console.log('1');
}

export default MSG1

 

만약 위와 같이 내 보낼 함수나 변수가 하나라면 export default 키워드를 쓴다. default로 하나만을 내보내면 {}중괄호를 쓸 필요를 없다.  그렇게 되면..

// test2.js

import MSG3 from './test1'

MSG3(); // '1'

 

보다시피 import를 하는데, 경로는 제데로 맞춰줬는데, 이름이 다르다! 그래도 실행이 된다.!

export default로 내보내는 것이 하나일 때는 경로만 제대로 맞춰주면 이름은 원하는 것으로 해도 상관없다.