named export(그냥 export) vs default export

zmin·2022년 7월 22일
0

named export

는 따로 아무것도 붙이지 않는 그 export

import { t as test } from "./test.js";
// t라는 이름으로 사용하면 된다

위와 같이 test 파일에서 export한 것을 as로 새로 이름 붙여 사용할 수 있으며
import할 때 아래 default export와 구분짓기 위해 중괄호를 꼭 사용해주어야한다

또한 여러개를 같이 export 할 수 있다

export const a = ...
export const b = ...
// 또는
const a = ...
const b = ...
export { a, b }

여러개가 있을 수 있어서인지 무명함수는 export 할 수 없다
뭐든 무조건 이름이 필요해서 named export

default export

는 한 파일(모듈)당 하나만 할 수 있으며 import 할 때 중괄호 없이 사용
오직 하나만 존재하기 때문에 무명함수도 export 가능
무명함수든 유명함수든 객체든 뭐든 import 시에 적어준 이름으로 사용

// text.js
export default function () {}

import Func from "test.js";
// Func 라는 이름으로 사용

물론 두 가지 export를 한 파일 내에서 같이 사용할 수 있다

이 경우 import는 아래와 같다

// 무조건 default export의 경우 가장 앞에 적어야한다.
import Func, {named1, named2} from "test.js";
  • 굳이 나눠서 쓰는 이유는 오직 하나만 export하는 default export의 경우 해당 모듈 또는 파일? 에 핵심임을 강조하기 위한 것 같다는 나의 생각
  • 근데 웬만해선 이름 그대로 쓰는 것 같다. 진짜 미친듯이 이름이 길고 파일 크기를 줄여야하는 그런게 아니라면 사실 그 export 된 이름이 해당 모듈을 잘 나타내주기 때문…이라는 나의 생각
profile
308 Permanent Redirect

0개의 댓글