JavaScript - export default 'exportName'과 export 'exportName'의 차이

BigbrotherShin·2020년 1월 14일
0

JavaScript

목록 보기
13/17
post-thumbnail

1. ES6 modules system의 일부

Export: export default HelloWorld; 와 import: import React from 'react'ES6 modules sysyem 의 일부이다.

A module is a self contained unit that can expose assets to other modules using export, and acquire assets from other modules using import.

import React from 'react'; // get the React object from the react module

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld; // expose the HelloWorld component to other modules

2. 차이점

Named exports: export exportName;

export function func() {}func로 export 하는 것이다. 이 예시에서는 import { func } from 'module'과 같이 export의 이름과 같아야 한다. 따라서 한 개의 module에 여러 개의 이름을 가진 exports가 있을 수 있다.

Default export: export default exportName;

export default function func() {} 는 만약 import X from 'module'로 import를 한다면, func를 해당 local에서 X로 사용할 수 있다(즉, module asset의 이름을 변경할 수 있다). 한 개의 module에는 하나의 export default만 존재할 수 있다.

module은 named exportsdefault export를 포함할 수 있다.
그것들은 import defaultExport, { namedExport1, namedExport2 } from 'module'처럼 import될 수 있다.

[원문]https://stackoverflow.com/questions/36426521/what-does-export-default-do-in-jsx/36426988

profile
JavaScript, Node.js 그리고 React를 배우는

0개의 댓글