<div id="readability-page-1" class="page"><div><code>export default</code> 구문은 보통 파일 내에서 한개만 <code>export</code>하거나, 대표로 <code>export</code>할 것이 있을 때 많이 쓴다.
<pre><code>function Foo {
 // ...
}

export default Foo
</code></pre>
<pre><code>export default function Foo {
 // ...
}
</code></pre>
그리고 쓰는 쪽에서는 이렇게 <code>import</code>할 것이다.
<pre><code>import Foo from './foo'
</code></pre>
그런데 왜 이것을 않으면 좋은지 몇 가지 이유를 들어서 설득해보자.
<h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#%EC%98%88%EC%A0%9C">예제</a></li>
<li><a href="#%EA%B2%80%EC%83%89%EC%9D%B4-%EC%96%B4%EB%A0%B5%EB%8B%A4">검색이 어렵다.</a></li>
<li><a href="#commonjs">commonjs</a></li>
<li><a href="#re-export">re-export</a></li>
<li><a href="#%EB%8B%A4%EC%9D%B4%EB%82%98%EB%AF%B9-import">다이나믹 import</a></li>
<li><a href="#%ED%81%B4%EB%9E%98%EC%8A%A4%EB%82%98-%ED%95%A8%EC%88%98%EA%B0%80-%EC%95%84%EB%8B%88%EB%A9%B4-%ED%95%9C%EC%A4%84%EC%9D%B4-%EB%8D%94-%ED%95%84%EC%9A%94%ED%95%A8">클래스나 함수가 아니면 한줄이 더 필요함.</a></li>
<li><a href="#%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81%EC%9D%98-%EC%96%B4%EB%A0%A4%EC%9B%80">리팩토링의 어려움</a></li>
<li><a href="#%ED%8A%B8%EB%A6%AC-%EC%89%90%EC%9D%B4%ED%82%B9">트리 쉐이킹</a></li>
<li><a href="#%EA%B2%B0%EB%A1%A0">결론</a></li>
</ul>
<h2 id="예제">예제</h2>
<code>foo.ts</code>
<pre><code>export default function Foo() {
 console.log('foo')
}
</code></pre>
<code>bar.ts</code>
<pre><code>export function hello() {
 console.log('hello')
}

export function hi() {
 console.log('hi')
}
</code></pre>
<h2 id="검색이-어렵다">검색이 어렵다.</h2>
<pre><code>import {h} from './bar'
</code></pre>
default export를 하게 되면 내보내기가 있는지 여부가 불투명하다.
<pre><code>import {Foo} from 'something'
</code></pre>
그러나 기본값이 없으면 코드 intellisense로 내부에 어떤 것을 import 할 수 있는지 쉽게 알 수 있다.
<img alt="./images/export1.png" crossorigin="anonymous" loading="lazy" width="521" height="147" decoding="async" data-nimg="1" src="https://yceffort.kr/_next/image?url=%2F2020%2F11%2Fimages%2Fexport1.png&amp;w=1080&amp;q=75">
<h2 id="commonjs">commonjs</h2>
<code>default</code>는 <code>commonjs</code>를 쓰는 사람들에게는 혼동을 준다. 위의 default export를 <code>commonjs</code>로 바꾸면
<pre><code>export default function Foo() {
 console.log('foo')
}

module.exports = {
 Foo,
 default: Foo,
}
</code></pre>
방식으로 해야하는 어려움이 있다.
<h2 id="re-export">re-export</h2>
<pre><code>export {default as Foo} from './foo'
</code></pre>
<pre><code>export * from './bar'
</code></pre>
named export 쪽이 다시 export 하는데 있어서 훨씬 편하다.
<h2 id="다이나믹-import">다이나믹 import</h2>
<pre><code>const foo = await import('./foo')
foo.default()
</code></pre>
<pre><code>const {hello} = await import('./bar')
hello()
</code></pre>
<code>default</code> 한단계를 더 거쳐야 한다.
<h2 id="클래스나-함수가-아니면-한줄이-더-필요함">클래스나 함수가 아니면 한줄이 더 필요함.</h2>
<pre><code>// 이건 안된다
export default const hello = 'hello'

// 이건 가능
export const hi = "hi";
</code></pre>
<pre><code>// 이렇게 해야한다.
const hello = 'hello'

export default hello
</code></pre>
<h2 id="리팩토링의-어려움">리팩토링의 어려움</h2>
<code>default export</code>는 가져다 쓰는 곳에서 네이밍을 제멋대로 할 수 있으므로, 리팩토링 하기가 어렵다.
<pre><code>import Foo from './foo'
import Wow from './foo'
import Bye from './foo'
</code></pre>
위 세개는 모두 동일하게 동작하기 때문에, 오타를 수정하는 등의 작업이 어려워 진다.
<h2 id="트리-쉐이킹">트리 쉐이킹</h2>
만약 여러개의 object를 하나의 <code>default export</code>로 내보내는 코드가 있다고 가정해보자.
<code>foo.ts</code>
<pre><code>export default {
 foo1: 'foo1',
 bar1: 'bar1',
}
</code></pre>
<code>bar.ts</code>
<pre><code>export const bar2 = 'bar2'
export const foo2 = 'foo2'
</code></pre>
<code>index.ts</code>
<pre><code>import Foo from './foo'
import {foo2} from './bar'

console.log(Foo.foo1)
console.log(foo2)
</code></pre>
<a href="https://rollupjs.org/repl/?version=2.33.1&amp;shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMEZvbyUyMGZyb20lMjAnLiUyRmZvbyclNUNuaW1wb3J0JTIwJTdCJTIwZm9vMiUyMCU3RCUyMGZyb20lMjAnLiUyRmJhciclNUNuJTVDbmNvbnNvbGUubG9nKEZvby5mb28xKSU1Q25jb25zb2xlLmxvZyhmb28yKSUyMiUyQyUyMmlzRW50cnklMjIlM0F0cnVlJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMmJhci5qcyUyMiUyQyUyMmNvZGUlMjIlM0ElMjJleHBvcnQlMjBjb25zdCUyMGJhcjIlMjAlM0QlMjAnYmFyMiclNUNuZXhwb3J0JTIwY29uc3QlMjBmb28yJTIwJTNEJTIwJ2ZvbzInJTIyJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMmZvby5qcyUyMiUyQyUyMmNvZGUlMjIlM0ElMjJleHBvcnQlMjBkZWZhdWx0JTIwJTdCJTVDbiUyMCUyMGZvbzElM0ElMjAnZm9vMSclMkMlNUNuJTIwJTIwYmFyMSUzQSUyMCdiYXIxJyUyQyU1Q24lN0QlMjIlN0QlNUQlMkMlMjJvcHRpb25zJTIyJTNBJTdCJTIyZm9ybWF0JTIyJTNBJTIyZXMlMjIlMkMlMjJuYW1lJTIyJTNBJTIybXlCdW5kbGUlMjIlMkMlMjJhbWQlMjIlM0ElN0IlMjJpZCUyMiUzQSUyMiUyMiU3RCUyQyUyMmdsb2JhbHMlMjIlM0ElN0IlN0QlN0QlMkMlMjJleGFtcGxlJTIyJTNBbnVsbCU3RA==">이를 트리쉐이킹을 거치게 되면 아래와 같은 결과가 나온다.</a>
<pre><code>var Foo = {
 foo1: 'foo1',
 bar1: 'bar1',
}

const foo2 = 'foo2'

console.log(Foo.foo1)
console.log(foo2)
</code></pre>
<code>named exports</code>를 하는게 번들 사이즈를 더 줄이는데 도움을 준다.
<h2 id="결론">결론</h2>
그럼에도 불구하고 default export를 쓰는 것을 그만두지는 않을 것 같다. <code>eslint-config-airbnb</code> 만 보더라도 <a href="https://github.com/airbnb/javascript#modules--prefer-default-export">내보낼 것이 한개인 경우에는 default를 쓰는 것을 권장하고 있고</a> <code>nextjs</code> 등의 라이브러리에서도 <code>default export</code>를 하지 않고서는 할 수 없는 기능들이 더러 있다.
<a href="https://github.com/airbnb/javascript/issues/1365">물론 여전히 두 export 방식에 대해서는 논란이 많지만</a> 아무래도 <code>default</code> 가 깔끔한 건 기분 탓일까, 습관 탓일까 🤔
그래도 가급적이면 named exports를 하는 방향으로 코드를 써보자. 그럼에도 <code>default</code>는 죄가 없는 것 같다.</div></div>

yceffort

근데 쓰는게 뭔가 더 안정적인 기분이야

export default를 쓰지 말아야 할 이유

댓글