import와 require의 공통점과 차이점 그리고 module.exports와 export default 의 공통점과 차이점에 대하여

참고: https://velog.io/@ylyl/React-import-require

React관련 동영상을 보면 어느곳에서는 import, export default를 사용하고 어느 동영상에서는 require, module.exports를 사용하는데, 시험삼아 두개를 서로 바꾸어 보아도 정상적으로 동작을 하였다. 이런 것을 보고 이것들의 차이점은 무엇인지 궁금하여 이글을 쓰게된다.

요약: import : es2015(React) 모듈 문법으로 정적 import 로써 항상 파일 상단에서만 사용된다. 이에반해 require은 Node의 모듈 문법(common.js)으로 동적 import에 해당하며 파일 어디에서나 사용가능하다. 쉽게 생각해서 React에서는 import 가 필요할때는 require를 쓰면 되고 export가 필요할대는 module.exports를 쓰면 된다.

그리고 'module.exports'와 'export default'는 차이가 있지만 호환가능하다.

원래 Node에서는 require만 사용하지만(import 사용 시 Error 발생),
바벨에서 import → require로 바꿔주기 때문에 우리가 React에서 import를 사용할 수 있는 것입니다.😱
(ex. 웹팩은 Node로 돌리기 때문에 import 사용 불가/ index.js 파일은 import 사용 가능)

// require
const React = require('react');
const { Component } = React;

class ReactBasic { ... }

module.exports = ReactBasic; // Node의 모듈 문법

// import로 변환 가능
import React, { Component } from 'react';

class ReactBasic { ... }

export default ReactBasic; // es2015 모듈 문법

export된 컴포넌트는 다른 파일에서 require을 사용해 불러와 사용할 수 있습니다.

// require
const React = require('react');
const ReactDom = require('react-dom');
const ReactBasic = require('./ReactBasic');

ReactDom.render(<ReactBasic />, document.querySelector('#root'));

// import로 변환 가능
import React from 'react';
import ReactDom from 'react-dom';
import ReactBasic from './ReactBasic';

다른파일에서 export default로 내보낸 파일은 import로 가져오고 export const로 내보낸 파일은 import { }로 가져온다. 예시를 보자

ex)
A라는 파일에서 

export const hello='hello'; 
export default NumberBaseball; 

로 되어 있다면 다른 파일에서 

각각 import {hello};
import NumberBaseball; 의 형식으로 가져올 수 있는 것이다.

 

또한 하나의 파일에서는 export default는 오직 한번만 쓸수 있고 export const는 여러번 쓸 수 있음.

꼭기억할 것만 보자면

어떤 파일에서 import React, {Component} from 'react';라는 문구가 있다면 다른 파일에

export const Component="Component" 혹은 exports.Component='Component'; 라는 문구가 있다고 예상하면 된다. 

또한 어떤 파일에서 import NumberBaseball;라는 문구가 있으면 다른 파일에 export default NumberBaseball; 이라는 문구가 있다고 보면 됨.