자바스크립트 모듈 치트시트 📄

다음은 다양한 내보내기 방법과 해당 가져오기 방법을 보여주는 치트 시트입니다. 실제로 이름, 기본값 및 목록의 3가지 유형으로 증류됩니다. 내보내기가 가져오기 방식과 일치하는지 확인하면 문제가 없습니다 👍

// Name Export | Name Import
export const name = 'value'
import { name } from '...'

// Default Export | Default Import
export default 'value'
import anyName from '...'

// Rename Export | NameImport
export { name as newName }
import { newName } from '...'

// Name + Default | Import All
export const name = 'value'
export default 'value'
import * as anyName from '...'

// Export List + Rename | Import List + Rename
export {
  name1,
  name2 as newName2
}
import {
  name1 as newName1,
  newName2
} from '...'

이제 각각을 살펴보고 어떻게 작동하는지 봅시다 🤓

ㅏ. 이름

여기서 핵심은 이름을 갖는 것입니다. 따라서 "명명된"내보내기 lol 😂

export const name = 'value';

import { name } from '...';

console.log(name); // 'value'

❌ 내가 뭐라고, 이름도, 수출도 없었다!

export 'value'

import { } // 👈 see I don't even know what to put here...give me a name!

비. 기본

기본 내보내기를 사용하면 이름이 필요하지 않습니다. 원하는 이름을 지정할 수 있기 때문에 👏

export default 'value'

import anyName from '...';

console.log(anyName); // 'value'

❌ 기본값이 있는 변수 선언 없음

export default const name = 'value'; // don't try to give me a name!

기본 + 이름 혼합

하나의 파일에 기본 및 이름 내보내기를 절대적으로 결합할 수 있습니다 🤝

export const name = 'value';
export default 'value'

import anyName, { name } from '...';

씨. 목록 내보내기

세 번째 스타일은 내보내기 목록입니다.

const name1 = 'value1';
const name2 = 'value2';

export {
  name1,
  name2
}

import {
  name1,
  name2
} from '...'

console.log(
  name1, // 'value1'
  name2, // 'value2'
)

주목해야 할 한 가지 중요한 점은 이러한 목록은 객체가 아니라는 것입니다. 예, 그렇게 보이는 것으로 알고 있습니다. 하지만 그렇지 않습니다. 모듈을 처음 배울 때 이 혼란을 겪었습니다. 그것은 개체가 아니라 내보내기 목록입니다!

// ❌ Export list ≠ Object
export {
  name: 'name'
}

내보내기 이름 바꾸기

내보내기 이름이 마음에 들지 않습니다. 문제 없습니다. as 키워드를 사용하여 이름을 바꿀 수 있습니다.

const name = 'value'

export {
  name as newName
}

import { newName } from '...'

console.log(newName); // 'value'

// Original name is not accessible
console.log(name); // ❌ undefined

❌ 인라인 내보내기와 내보내기 목록을 결합할 수 없습니다.

export const name = 'value';

// You're already exporting name ☝️, don't export me again
export {
  name
}

가져오기 이름 바꾸기

가져오기에도 동일한 규칙이 적용됩니다. as 키워드를 사용하여 이름을 바꿀 수 있습니다.

const name1 = 'value1';
const name2 = 'value2';

export {
  name1,
  name2 as newName2
}

import {
  name1 as newName1,
  newName2
} from '...'

console.log(newName1); // 'value1'
console.log(newName2); // 'value2'

❌
name1; // undefined
name2; // undefined

모두 가져오기

export const name = 'value';

export default 'defaultValue';

import * as anyName from '...';

console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultValue'

이름 대 기본값

default 내보내기를 전혀 사용해야 하는지 여부에 대해 많은 논쟁이 있었습니다. 이 2개의 기사를 확인하세요.

Why I've stopped exporting defaults from my JavaScript modules

GitLab RFC by Thomas Randolph

모든 것이 그렇듯이 정답도 오답도 없습니다. 올바른 방법은 항상 귀하와 귀하의 팀에 가장 좋은 방법입니다. 그러나 여기에서 이 논쟁을 생각할 수 있습니다. 사만다의 이야기 시간 ...

개발자가 아닌 용어의 이름 대 기본 내보내기

당신이 친구에게 빚을 지고 있다고 가정해 봅시다. 친구가 현금이나 전자 송금으로 갚을 수 있다고 합니다. 전자이체를 통한 결제는 거래내역에 본인의 이름이 첨부되기 때문에 named export와 같습니다. 따라서 친구가 잊어버리고 당신이 여전히 돈을 빚지고 있다고 주장하면서 당신을 쫓기 시작한다면. 당신의 이름이 지불에 있기 때문에 당신은 단순히 그들에게 송금 증명서를 보여줄 수 있습니다. 그러나 default export 처럼 친구에게 현금으로 갚았다면 증거가 없습니다. 그들은 $50가 당신이 아니라 Susan에게서 온 것이라고 말할 수 있습니다. 현금에는 이름이 붙어 있지 않아서 당신이나 누구에게서 온 것이라고 말할 수 있습니다 😵

그래서 전자 송금( named export ) 또는 현금( default export )으로 가는 것이 더 낫습니까? 글쎄, 그것은 당신이 당신의 친구를 믿느냐 믿지 않느냐에 달려 있습니다. 더 나은 해결책은 관계를 그런 위치에 두지 않는 것입니다. 당신의 우정을 위험에 빠뜨리지 않도록 노골적인 것이 더 좋습니다. 그리고 예, 이 아이디어는 내보내기를 선택하든 named 또는 default 내보내기를 선택하든 적용됩니다. 더 명시적인 것을 선호하므로 코드가 명확합니다. 그러나 물론 귀하의 코드는 귀하의 코드입니다. 그리고 당신과 당신의 팀을 위해 무엇이든 할 수 있습니다 😄

커뮤니티 입력

: 모듈에서 모든 내보내기를 가져오는 별표 가져오기를 추가할 수 있는 방법이 있을 수 있습니다. import * as myModule from '/modules/my-module.js'; . 그 중 핵심은 모듈을 사용할 때 가져오기 측에서 기본값이 myModule.default 이고 나머지는 이름이 myModule.nameOfSomething 라는 것입니다. CodeSandbox Example

: 👍 기본 내보내기를 위해 여기에서 anyName 강조! *이것이 내가 명명된 내보내기를 선호하는 이유이지만 커뮤니티는 모든 항목(특히 React 구성 요소)을 기본 내보내기로 설정되어 있으므로 차이점을 이해하는 것이 좋습니다! 또한 혼란스러워 보이는 경우: named imports != destructuring

자원

MDN: Modules

MDN: Export

MDN: Import

Exploring JS: Modules

2ality: Importing & Exporting

읽어주셔서 감사합니다 ❤
안녕하세요! | | Facebook | Blog | SamanthaMing.com