본문 바로가기

Ecmascript/Javascript

[module] import, require, module.exports, export

노드랑 리액트랑 번갈아가면서 하다보면 헷갈릴때가 있어서 정리함

import, require

  • 외부 모듈 가져오는 것
  • node는 commonJS를 지원 -> require만 가능

module.exports, export

  • 외부에서 사용할수 있게 모듈로 내보내는 것
  • node는 commonJS를 지원 -> exports, module.exports만 가능
/** moduler객체니 default로 내보내면 변수로 내보내기 때문에 한파일에 한번만 내보내기 가능 **/
// 한개만(module) 내보내기 : commonJS 방식
module.exports = {name: "react"};
// 한개만(default) 내보내기
export default React;

/** 객체로 묶어내보내기 때문에 여러개를 묶어 내보내기 가능 **/
// 여러개 내보내기
exports.name = "react";
exports.getNum = function() { return 1; }
// 여러개 내보내기
export const str = "hello";
export function getNum() { return 1; }

/** 객체로 묶어내보낸 것은 구조분해 해서 가져오거나 dot으로 접근해서 가져옴 **/
// [commonJS 방식] 한번에 가져오기
const Component = require('react').Component;
// [ES6] 한번에 가져오기
import { Component } from 'react';

// [commonJS 방식] 여러개 가져오기 
const React = require('react');
const { Component } = React;
// [ES6] 여러개 가져오기
import React, { Component }  from 'react';