export에는 default export 및 named export 의 차이점에 대해 알아본다.

export에는 default export 와 named export 2가지 방법이 있다.

named export

정의된(const) 이름으로 사용해야 하며, 하나의 js파일에서 여러 개의 값을 export 시킬 수 있다.

// action.js
export const UPDATE_TITLE = 'player/UPDATE_TITLE';
export const ADD_PLAYER = 'player/ADD_PLAYER';

// Header.js
import {updateTitle, ADD_PLAYER} from "./action";

import 시 { 중괄호 } 를 사용해야 한다.

import { A } from './A'

export const A = 42
// or
export class A = 100

default export

js파일 내에 하나만 생성해야 하며, import시 아무 이름으로 가져와도 된다.

// A.js
export default 42

// CASE1 B.js
import ABCDEFG from './A'

// CASE2 B.js
import A from './A'
import MyA from './A'
import Something from './A'

named exports를 import 하는 경우는 {] 사용하고 동일한 이름으로 import 해야 한다.

default exports를 import하는 경우는 {} 없이 사용 가능하고 또한 이름을 바꿀수도 있다.

출처 : https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import/36796281#36796281

Tags: reactjs