본문 바로가기
프로그래밍/JavaScript

[Js] export와 export default의 import 차이

by hi-rachel 2022. 9. 2.

Js 프로그래밍 강의를 듣던 중 리팩토링시 파일을 분리하면서 export를 쓸 때 export 와 export default의 차이가 궁금해졌다.

 

예시 코드)

export const $ = (selector) => document.querySelector(selector);

 

export const store = {
  setLocalStrage(menu) {
    localStorage.setItem("menu", JSON.stringify(menu));
  },
  getLocalStorage() {
    return JSON.parse(localStorage.getItem("menu"));
  },
};

export default store;

 

import { $ } from "./utils/dom.js";
import store from "./store/index.js";

비교해보니 import 가져올 때 export 한 함수는 { }로 가져오고, export default 한 함수는 그냥 가져온다.

 


 

다음은 ES6의 import/export 3가지 다른 스타일을 보여준다.

// Three different export styles
export foo;
export default foo;
export = foo;

// The three matching import styles
import {foo} from 'blah';
import foo from 'blah';
import * as foo from 'blah';

Roughly compiles to:

exports.foo = foo;
exports['default'] = foo;
module.exports = foo;

var foo = require('blah').foo;
var foo = require('blah')['default'];
var foo = require('blah');

컴파일 되는 모습은 다르지만 결론적으로는

 

여러 오브젝트를 export 할 경우 export
하나만 export 할 경우 default export 사용 가능(export로도 문제 없음)

 

예시)

function x1(){};
function x2(){};
export {x1},{x2};  //my-module.js
import {x1},{x2} from 'my-module';

otherwise for a single export, default export works well

export default function x1() {};
import x1 from 'my-module';

export에 따라 다른 import styles에 유의하자.

 

 

참고 : https://stackoverflow.com/questions/42478661/difference-between-export-and-export-default-in-javascript

 

Difference between 'export' and 'export default' in JavaScript?

What exactly is the difference between the two? I've seen people use: function foo () { ... } export default foo; And I've seen: function bar () { ... } export bar; Also, why would you us...

stackoverflow.com