[React, JavaScript] named export와 default export 무엇을 사용하는 것이 좋을까?

 JavaScript 모듈 시스템에서 export default와 named export는 모두 모듈을 외부로 내보내는 방식입니다. 본 포스팅에서는 각 export의 차이점과 적절한 사용 방법에 대하여 이야기를 나누어보고자 합니다.

 

1. export default

export default는 모듈에서 기본으로 하나의 값만 내보낼 수 있게 합니다. 다음과 같은 상황에서 많이 사용됩니다.

• 단일 값만 내보낼 때 적합 (예: 하나의 컴포넌트, 클래스, 함수 등).
• 내보낸 모듈을 가져오는 쪽에서 임의의 이름으로 import가 가능.

// math.js
export default function add(a, b) { return a + b; }

// 다른 파일에서
import sum from './math'; // 임의의 이름으로 가져오기 가능
console.log(sum(2, 3)); // 5

 

 

 위처럼 default export를 이용한 경우에는 해당 모듈을 가져오는(import하는) 파일마다 다른 이름으로 가져올 수 있습니다.

 

2. named export

named export는 하나의 모듈에서 여러 개의 값을 내보낼 때 사용됩니다. 가져오는 쪽에서는 정확한 이름을 사용해야 하며, 원하는 값만 선택적으로 가져올 수 있습니다.

 

// math.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

// 다른 파일에서
import { add, subtract } from './math';
console.log(add(5, 2)); // 7
console.log(subtract(5, 2)); // 3

 

 위처럼 add와 subtract가 각각 named export로 내보내졌기 때문에, import할 때 중괄호 { }를 사용해 정확한 이름으로 불러와야 합니다.

 

3. 함께 사용하는 방법

export default와 named export는 동일 파일에서 함께 사용할 수도 있습니다. 기본값으로 자주 쓰이는 것을 export default로 내보내고, 부수적인 값들은 named export로 내보낼 수 있습니다.

 

// math.js
export default function add(a, b) { return a + b; }
export const PI = 3.14; export function multiply(a, b) { return a * b; }

// 다른 파일에서
import sum, { PI, multiply } from './math';
console.log(sum(2, 3)); // 5 console.log(PI); // 3.14
console.log(multiply(2, 3)); // 6

 

 

default export VS named export 🧐

export default는 모듈의 핵심 기능이나 하나의 대표 값을 내보낼 때 적합합니다.
named export는 여러 가지 유틸리티 함수나 다양한 기능을 제공하는 모듈에서 사용하기 좋습니다.

 

즉 단일값을 내보낼 때에는 default export, 여러 값을 내보낼 때에는 named export가 적합하다고 볼 수 있습니다.

https://github.com/airbnb/javascript#modules--prefer-default-export

 

Airbnb에서도 단일값을 내보낼  때에는 default export를 권장하고 있습니다. 이는 가독성과 유지보수성을 위하여 단일값을 export하는 파일을 장려하기 위함이라고 합니다.

 

하지만 default export를 권장하는 것에 대한 반대 의견도 있으며 많은 지지를 받고 있습니다.

https://github.com/airbnb/javascript/issues/1365

What is the benefit of prefer-default-export? · Issue #1365 · airbnb/javascript

 

 default export를 하게 되면 추후 리팩토링이 힘들어진다는 것이 그 이유입니다. 실제로 저 역시 좀더 명확한 네이밍을 위해서 컴포넌트의 이름을 변경하였는데 import 하는 곳에서는 자동 변환이 이루어지지 않아서 상용 서비스 배포 단계에서 놓칠 뻔한 적이 있습니다.

 만일 named export를 사용했더라면 export, import하는 파일 두 곳에서 정확하게 이름을 맞춰주어야 하기 때문에 리팩토링에서 개발자의 공수를 덜어낼 수 있을 것으로 보입니다(+ 위 사례와 같은 휴먼 에러 방지). 

 

 

성능상의 차이는 없을까?

 지금까지 코드의 가독성, 유지보수성 측면에서 어느 내보내기 방법이 적합한지에 대하여 이야기를 나누었습니다. 그렇다면 성능상 차이는 존재하지 않을까요? 내보내기, 가져오기(export, import) 자체 성능은 차이가 없는 것으로 알려져있으나 tree shaking까지 고려하면 이야기가 달라집니다.

 

 tree shaking은 사용되지 않는 코드를 제거하기 위하여 JS Context에서 일반적으로 사용되는 용어입니다. 아래 예시를 통하여 알아보도록 하겠습니다.

 

1. Named Export 예시

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;

// main.js
import { add } from './utils';

console.log(add(2, 3)); // 5

 

named export를 사용한 경우에는 add 함수만 import 하였기 때문으로 번들러가 subtract, multiply는 사용하지 않는다고 판단하여 제거할 수 있습니다.

 

2. Default Export 예시

// utils.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
export default { add, subtract, multiply };

// main.js
import utils from './utils';

console.log(utils.add(2, 3)); // 5

 

 마찬가지로 add만 사용되었지만 default export로 substract, multiply로 묶여있기 때문에 번들에 포함될 가능성이 있습니다. 이는 명시적으로 package.json에 "sideEffects: false"를 적용하여도 발생할 가능성이 있습니다.