React 기본 학습 -4. ES6과 node(commonjs) 문법 차이

리액트 강좌를 보면서 학습한 내용 정리용.

리액트 무료 강좌(웹게임) - ZeroCho TV

ES2015 문법 (ES6)

babel 이 지원해줘서 이 문법을 쓸수있게 해 줌.

• 예1) import React, { Component } from 'react';
• 예2) export default NumberBaseball;

노드 모듈 문법(commonjs)

node에서는 이녀석만 지원함.

• 예1) const React = require('react');

노드 모듈 시스템에서 아래 두 구문은 서로 같은 의미를 지닌다.

module.exports = { hello: 'a' };

exports.hello = 'a';

webpack은 node가 돌리는애라서 commonjs문법으로만 기입해야함(선두에 const 붙이는 식)

하지만 client.jsx 같은 애들은 webpack에 들어있는 babel이 변환해 주기때문에 ES6문법을 사용해도 됨.

부가설명

• export default NumberBaseball; 는 module.exports = NumberBaseball; 로 호환가능. 100% 동일하진 않으나 대충 비슷한 의미로 인식하면 되는듯.
• 가져올때는 import NumberBaseball; 이렇게 가져옴.
• 아래 예시와 같이 default 를 붙이지 않고 export 한 것은 default 를 붙인것과 import 시에 차이가 있음.

  export const hello = 'hello'; // import { hello }
  export const bye = 'hello' ; // import { hello, bye }
  

• export default XXX; 처럼 default 를 붙인것은 한번만 선언 가능.
  
• default가 없는것은 변수명만 겹치지 않는다면 여러번 선언 가능.

Pie's Tech Note

생계형 개발자의 메모장