[React] 3-1 import와 require 비교하기

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

둘다 다른 파일의 코드를 불러온다는 목적을 가지고 있음!

하지만 babel같은 ES6코드를 변환해주는 도구 없니는 require 키워드를 사용해야한다고 함

 

require

노드의 모듈에서 사용하는 방법으로, 남이 만든 모듈이나 다른파일에서 만든 모듈을 불러올 수 있다. 

modeul.exports = {리액트 컴포넌트이름}

import {객체} from = "{파일 주소, 모듈 이름}"

 

import 

ES2015에서 새롭게 도입된 키워드

리액트에서 default로 export되는게 아니면 중괄호로 감싸서 import!

export default "{리액트 컴포넌트 이름}" 

import {객체} from "{파일 주소, 모듈 이름}"

 

default는 한파일에 한번만 사용가능함!!  주로 컴포넌트를 export할 때 사용됨! (그냥하는건 얼마든지 가능)

 

 

 

ES2015 모듈 문법

import React, {Component} from 'react';

class NumberBaseball extends Component {  }
export const hello = 'hello'; // import {hello}
export defult NumberBaseball; // import NumberBaseball

노드의 모듈 문법

(= common.js)

const React = require('react');
module.exports = NumberBaseball;
export.hello = 'hello'

 

기본적으로 노드로 webpack을 돌림 노드에서는 노드모듈문법만 지원함. import를 사용하려면 바벨이 필요함 (그래서 여태 import를 쓸 수 있었던 것)

 

 

export default와 module.exports는 엄밀히 다름. 노드에서는 require 리액틑 import, exports를 쓴다라고 알아두자~ 

https://www.zerocho.com/category/ECMAScript/post/579dca4054bae71500727ab9

(ECMAScript) ES2015(ES6) 모듈 시스템 - import, export, default