export vs export default 무엇을 사용해야할까?

export vs export default 무엇을 사용해야할까?

export, export default를 아무 생각 없이 혼용해서 쓰고 있는 저 자신을 발견하고 학습을 하고 포스트를 작성합니다.

import MemberDto from "./member.dto";
import crypto from "crypto";

export default class MemberService {
	constructor() {}

	registerMember(memberDto: MemberDto) {
		const salt = crypto.randomBytes(16).toString("hex");
		const hassedpassword = this.hashPassword(memberDto.password, salt);
		
		memberDto.getHashPassword(hassedpassword);
		return memberDto;
	}

	hashPassword(password: string, salt: string) {
	const hash = crypto.createHash("sha256");
	hash.update(password + salt);
	return hash.digest("hex");
	}
}

다음과 같이 최근 페어프로그래밍을 진행하면서 코드를 작성할 때 export default class로 작성을 하였습니다.

export default

이 문법의 경우 하나의 모듈을 개별적으로 내보내는데 주로 사용합니다.

export default의 특징
1. 파일 당 export default는 한 개만 가능하며 대표적으로 export 할 것이 있거나 한 개만 export 하면 될 때도 주로 사용합니다.
2. 다른 파일에서 import 할 때 {} 중괄호 없이 import 할 수 있습니다.
3. class명을 짓지 않아도 됩니다.
4. import 할 때 마음대로 작명이 가능합니다.

import MemberDto from "./member.dto";

import MembererererDto from "./member.dto";

다음과 같이 import 할 때 이름을 아무렇게나 작성해서 사용할 수 있습니다.

하지만 export default 사용을 지양한다는 포스트들이 있습니다.

만약 여러 개의 object를 하나의 default export로 내보내는 코드가 있다고 가정해보겠습니다.
foo.ts

export default {
  foo1: 'foo1',
  bar1: 'bar1',
}

bar.ts

export const bar2 = 'bar2'
export const foo2 = 'foo2'

index.ts

import Foo from './foo'
import { foo2 } from './bar'

console.log(Foo.foo1)
console.log(foo2)

출처: https://yceffort.kr/2020/11/avoid-default-export

named export

이 문법의 경우 export default와 다르게 한 파일 내에서 여러 번 사용해도 상관이 없습니다.

export default와 차이점
1. 한 파일 내에서 여러 변수나 클래스들을 export 할 수 있다.
2. import 해서 불러올 때 {} 중괄호를 사용해서 불러온다. (export name이 동일해야 한다.)
3. export class A 같이 class명을 작성해야한다.

// 모듈에서 여러 개의 값을 내보내기
export const a = 1;
export const b = 2;

// 함수 내보내기
export function foo() { /* ... */ }

export const가 가능하나 export default const는 불가능하다.

그러면 어떻게 사용하면 좋을까?

airbnb(에어비앤비) 컨벤션에 의하면 * as 로 import 하는 문법을 지양하고 내보낼 것이 한 개인 경우에는 export default를 사용하는 것을 권장한다고 하니 알아두면 좋을 것 같습니다.

리액트를 사용할 때 거의 대부분 export default를 사용했었습니다.
리액트의 경우 컴포넌트형으로 코드를 작성하다보니 그리하였던 것 같습니다. 그리고 기본적으로 리액트를 처음 배울 때부터 export default로 무의식적으로 작성하는 습관이 있었습니다.

최근 학습하고 있는 백엔드 코드에서는 컴포넌트형도 아니고 주로 클래스를 많이 사용합니다.
내보낼 class가 한 개 일경우 export default, 여러 개일 경우 export로 보내는 습관을 길들이면 좋을 것 같습니다.

또한 export default를 사용하더라도 import 할 때 가급적 class명을 작명하고 동일한 네임으로 import 해야 헷갈리지 않을 것 입니다.

AirBnb Javascript github:
https://github.com/airbnb/javascript