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에 유의하자.
'프로그래밍 > JavaScript' 카테고리의 다른 글
[Js] Array push와 concat의 차이 (0) | 2023.01.09 |
---|---|
[JS] 어떤 Number가 제곱수인지 어떻게 알까? / [프로그래머스] 제곱수 판별하기 (0) | 2023.01.07 |
[JS] Array 요소 추가, 제거, 길이 변경 메서드 정리 💛 (0) | 2023.01.05 |
[Js] split(), split(''), split(' ')의 명확한 차이 (0) | 2023.01.04 |
[자바스크립트 완벽 가이드] 비동기 프로그래밍이란? (0) | 2022.12.13 |