모듈 사용 시 import 와 require 의 차이

코드의 크기가 커지면 코드를 기능별로 파일로 나누어 저장하고 불러와서 쓰게 되는데

이렇게 나누어진 파일들을 모듈 module 이라고 하며 나누는 것을 모듈화한다고 한다

모듈을 불러와서 사용할 때

Node.js (Common JS) 에서는 require 를 사용하고

const name = require('./namelist.js')

ES6 (최신? 자바스크립트 표준 규격) 에서는 import 를 사용한다

import name from './namelist.js'

모듈로 설정할 파일을 만들고 데이터를 모듈로서 동작하도록 만들기 위해서

Node.js 의 경우엔 데이터를 module.exports 객체에 넣어주는데 ES6의 경우와 비교하면

모듈 파일 내의 데이터를 변수 별로 하나 하나 분리해서 내보내고자 할 때는

exports.변수명 = 값 // . 으로 구분 Node.js

export 변수명 = 값 // 공백으로 구분 ES6

ES6 의 경우 속성 값을 다른 변수명으로 불러와서 사용할 수 있도록 아래와 같이 as 를 사용할 수 있다

import {dogname as dog} from 'namelist.js' // 모듈의 dogname 변수를 가져와 dog 변수로 사용하겠다

그렇지 않고 모듈 파일을 불러온 export 객체를 그대로 사용할때는 다음과 같이 사용한다

Node.js 에서는 export 해온 속성값을 따로 정해주지 않고 module.export 하면 객체 전체를 가리키는 것을 의미하고,

ES6 에서는 이렇게 모듈의 변수명을 지정하지 않고 불러올 때 사용할 기본값을 default 로 정해준다 (default 는 하나만!)

modules.exports = 객체 혹은 변수 // Node.js

export default 변수 // ES6

import 해서 가져와 사용 시에 중괄호의 사용에 대한 내 추측을 아래에 적어보겠다

ES6 의 default 와 Node.js 의 module.exports 는 모듈 내부 (변수, 함수)를 따로 가져와 사용할때가 아니므로

export 객체를 구조분해할당 하기 위한 중괄호가 필요없지만

ES6 에서 default 가 아닌 따로 설정한 변수들을 가져 올때나, Node.js 의 모듈 내부 변수를 따로 가져오려 할때는

내보낼때 export 객체의 속성을 각각 정해서 내보내기 때문에

export 객체를 구조분해할당하여 사용하기 위해 중괄호를 사용하는 것 같다

impot {변수명1} from './namelist.js' // 모듈 내의 변수명1 변수를 그대로 사용가능하다

~~아아 이것이 '모듈'이라는 것이다...~~

토끼씨