ES6 수입에는 언제 컬리 브레이스를 사용해야 하나요?

당연한 것 같습니다만, ES6에서 단일 모듈을 Import 할 때 언제 곱슬곱슬한 브레이스를 사용해야 할지 혼란스러웠습니다.예를 들어 현재 진행 중인 React-Native 프로젝트에는 다음과 같은 파일과 내용이 있습니다.

파일 initialState.js

var initialState = {
todo: {
todos: [
 {id: 1, task: 'Finish Coding', completed: false},
 {id: 2, task: 'Do Laundry', completed: false},
 {id: 2, task: 'Shopping Groceries', completed: false},
]
} };
export default initialState;

TodoReducer.js에서는 곱슬머리 괄호를 사용하지 않고 Import해야 합니다.

import initialState from './todoInitialState';

를 동봉하면initialState중괄호로 묶으면 다음 코드 행에 대해 다음 오류가 발생합니다.

정의되지 않은 속성 작업관리를 읽을 수 없습니다.

파일 TodoReducer.js:

export default function todos(state = initialState.todo, action) {
// ... }

비슷한 오류는 내 컴포넌트에도 발생합니다.한 번 Import를 할 때는 당연히 컴포넌트/모듈을 여러 개 Import할 때는 곱슬곱슬한 괄호로 묶어야 하기 때문에 언제 해야 할지 고민하고 있었습니다.

여기의 Stack Overflow 게시물에는 질문에 대한 답변이 없습니다.대신 ES6에서는 단일 모듈을 Import할 때 컬리 괄호를 사용해야 하는지 여부를 묻고 있습니다(컬리 괄호가 필요한 단일 Import를 본 적이 있기 때문에 이는 사실이 아닌 것 같습니다).

질문에 대한 답변

기본 Import는 다음과 같습니다.

// B.js import A from './A'

동작하는 것은 다음과 같은 경우 뿐입니다.A에는 디폴트 내보내기가 설정되어 있습니다.

// A.js export default 42

이 경우 Import할 때 할당하는 이름은 중요하지 않습니다.

// B.js import A from './A' import MyA from './A' import Something from './A'

항상 디폴트 export로 해결되기 때문입니다.A.

이것은 다음과 같은 이름의 Import입니다.

import { A } from './A'

동작하는 것은 다음과 같은 경우 뿐입니다.A에는 다음과 같은 이름의 내보내기가 포함되어 있습니다.

export const A = 42

이 경우 내보내기 이름으로 특정 항목을 가져오기 때문에 이름이 중요합니다.

// B.js import { A } from './A' import { myA } from './A' // Doesn't work! import { Something } from './A' // Doesn't work!

이러한 작업을 수행하려면 해당 명명된 내보내기를 다음에 추가합니다.A:

// A.js export const A = 42 export const myA = 43 export const Something = 44

모듈에는 디폴트내보내는 1개뿐이지만 원하는 수의 이름 있는 내보내기(0, 1, 2, 또는 다수)를 사용할 수 있습니다.이 모든 것을 함께 Import 할 수 있습니다.

// B.js import A, { myA, Something } from './A'

여기서는 디폴트내보내기를 Import합니다.A, 및 이름 있는 내보내기:myA그리고.Something,각각 다음과 같다.

// A.js export default 42 export const myA = 43 export const Something = 44

Import시에 다른 이름을 모두 할당할 수도 있습니다.

// B.js import X, { myA as myX, Something as XSomething } from './A'

디폴트 내보내기는 통상 모듈에서 얻을 수 있는 모든 것에 사용되는 경향이 있습니다.명명된 내보내기는 편리할 수도 있지만 항상 필요한 것은 아닌 유틸리티에 사용되는 경향이 있습니다.단, 내보내기 방법은 사용자에게 달려 있습니다.예를 들어 모듈에 기본 내보내기가 전혀 없는 경우가 있습니다.

이 매뉴얼은 ES 모듈에 대한 훌륭한 가이드로 디폴트 내보내기 및 이름 있는 내보내기 간의 차이점에 대해 설명합니다.

별표기법도 있습니다.import언급할 가치가 있는 ES6 키워드.

콘솔 로그 혼합을 시도하는 경우:

import * as Mix from "./A"; console.log(Mix);

다음과 같은 이점을 얻을 수 있습니다.

ES6 수입에는 언제 컬리 브레이스를 사용해야 하나요?

모듈에서 특정 컴포넌트만 필요로 하는 경우 브래킷은 금색으로 되어 있기 때문에 웹 팩 등의 번들러 설치 공간이 줄어듭니다.

Dan Abramov의 답변은 디폴트 수출과 명명된 수출에 대해 설명한다.

어떤 것을 사용할까요?

David Herman의 인용: ECMAScript 6은 단일/기본 내보내기 스타일을 선호하며 기본값을 가져오는 데 가장 적합한 구문을 제공합니다.명명된 내보내기 Import는 간결성이 약간 떨어집니다.

그러나 TypeScript에서는 리팩터링으로 인해 export라는 이름의 내보내기가 선호됩니다.예를 들어 기본적으로 클래스를 내보내고 이름을 바꾸면 해당 파일에서만 클래스 이름이 변경되고 다른 참조에서는 변경되지 않으며 명명된 내보내기 클래스 이름이 모든 참조에서 변경됩니다.명명된 내보내기는 유틸리티에도 선호됩니다.

전체적으로 원하는 것을 사용하세요.

추가의

기본 내보내기는 실제로 이름이 default인 이름 있는 내보내기이므로 다음과 같이 기본 내보내기를 가져올 수 있습니다.

import {default as Sample} from '../Sample.js';

생각해보면importNode.js 모듈, 오브젝트, 파괴용 구문설탕으로 매우 직관적입니다.

// bar.js module = {};
module.exports = {
functionA: () => {},
functionB: ()=> {} };
// Really all that is is this:
var module = {
exports: {
functionA, functionB
}
};
// Then, over in foo.js
// The whole exported object: var fump = require('./bar.js'); //= { functionA, functionB } // Or import fump from './bar' // The same thing - object functionA and functionB properties
// Just one property of the object var fump = require('./bar.js').functionA;
// Same as this, right? var fump = { functionA, functionB }.functionA;
// And if we use ES6 destructuring: var { functionA } =
{ functionA, functionB }; // We get same result
// So, in import syntax: import { functionA } from './bar';

ES6 모듈의 개요:

내보내기:

내보내기에는 다음 두 가지 유형이 있습니다.

이름 있는 내보내기
디폴트 내보내기(모듈당 최대 1개)

구문:

// Module A export const importantData_1 = 1; export const importantData_2 = 2; export default function foo () {}

Import:

내보내기 유형(예: 이름 있는 내보내기 또는 기본 내보내기)은 무언가를 가져오는 방법에 영향을 미칩니다.

명명된 내보내기에서는 내보낸 선언(변수, 함수 또는 클래스)으로 곱슬곱슬한 괄호와 정확한 이름을 사용해야 합니다.
기본 내보내기에서는 이름을 선택할 수 있습니다.

구문:

// Module B, imports from module A which is located in the same directory
import { importantData_1 , importantData_2
} from './A';
// For our named imports
// Syntax single named import: // import { importantData_1 }
// For our default export (foo), the name choice is arbitrary import ourFunction from './A';

관심 사항:

이름이 지정된 내보내기에 일치하는 내보내기 이름과 함께 쉼표로 구분된 목록을 중괄호로 묶어서 사용합니다.
기본 내보내기에는 원하는 이름을 중괄호 없이 사용합니다.

에일리어스:

이름 있는 Import의 이름을 변경할 때마다 별칭을 통해 이 작업을 수행할 수 있습니다.이 구문은 다음과 같습니다.

import { importantData_1 as myData } from './A';

이제 우리는importantData_1단, 식별자는myData대신importantData_1.