ES6 가져 오기에 중괄호를 언제 사용해야합니까?

명백한 것처럼 보이지만 ES6에서 단일 모듈을 가져 오기 위해 중괄호를 사용해야 할 때 약간 혼란 스럽습니다. 예를 들어, 내가 작업하고있는 React-Native 프로젝트에는 다음 파일과 내용이 있습니다.

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 initialState from './todoInitialState';

initialState중괄호로 묶으면 다음 코드 줄에 대해 다음 오류가 발생합니다.

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

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

중괄호가있는 구성 요소에도 비슷한 오류가 발생합니다. 단일 가져 오기에 중괄호를 사용해야 할 때 궁금합니다. 여러 구성 요소 / 모듈을 가져올 때 중괄호로 묶어야하기 때문에 분명히 알고 있습니다.

편집하다:

에서의 SO 포스트 여기가 대신 내가 질문하고, 내 질문에 대답하지 않는 경우에 내가 나 가져 오기위한 중괄호를 사용하지 말아야 하나 이 명백하게하지 (모듈, 또는 나는 ES6에 하나의 모듈을 가져 오기위한 중괄호를 사용해서는 안 중괄호가 필요한 단일 가져 오기를 보았 듯이)

이것은 기본 가져 오기입니다 .

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

기본 내보내기A 가있는 경우에만 작동합니다 .

// A.js
export default 42

이 경우 가져올 때 어떤 이름을 할당해도 문제가되지 않습니다.

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

그것은 항상 기본 내보내기 는A .

이것은 명명 된 가져 오기입니다A .

import { A } from './A'

그것은 경우에만 작동 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

모듈은 하나의 기본 내보내기 만 가질 수 있습니다 있지만 원하는 만큼 이름이 지정된 내보내기 (0, 1, 2 또는 다수)를 . 모두 함께 가져올 수 있습니다.

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

여기서 기본 내보내기를 다음과 같이 가져옵니다. A 각각 이름이 지정된 내보내기를 myA및 이라고 Something합니다.

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

가져올 때 다른 이름을 모두 지정할 수도 있습니다.

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

기본 내보내기는 일반적으로 모듈에서 얻을 것으로 예상되는 모든 용도로 사용되는 경향이 있습니다. 명명 된 내보내기는 편리한 유틸리티에 사용되는 경향이 있지만 항상 필요한 것은 아닙니다. 그러나 내보내기 방법을 선택하는 것은 사용자의 몫입니다. 예를 들어, 모듈에는 기본 내보내기가 전혀 없을 수 있습니다.

이것은 기본 내보내기와 명명 된 내보내기의 차이점을 설명하는 ES 모듈에 대한 훌륭한 안내서입니다.

TL; DR : 기본이 아닌 내보내기를 가져 오려면 중괄호가 사용됩니다.

자세한 내용은 위의 Dan Abramovs 답변을 참조하십시오.

import언급 할 가치가 있는 ES6 키워드에 대해 별표 표시된 표기법이 있다고 말할 수 있습니다.

콘솔 로그 믹스를 콘솔하려고하면 :

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

당신은 얻을 것이다 :

ES6 가져 오기에 중괄호를 언제 사용해야합니까?

모듈에서 특정 구성 요소 만 필요한 경우에는 괄호가 황금색이므로 웹팩과 같은 번 들러의 설치 공간이 줄어 듭니다.

위의 Dan Abramov 답변은 기본 내보내기 및 명명 된 내보내기에 대해 설명합니다. .

어느 것을 사용해야합니까?

David Herman 인용 : ECMAScript 6은 단일 / 기본 내보내기 스타일을 선호하며 기본값을 가져 오는 가장 달콤한 구문을 제공합니다. 명명 된 내보내기를 가져 오는 것은 약간 덜 간결해야합니다.

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

당신이 선호하는 무엇이든 전반적으로 사용하십시오.

추가

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

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

import노드 모듈, 객체 및 구조화에 대한 구문 설탕으로 생각하면 직관적입니다.

// 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' // same thing, object functionA and functionB props


// just one prop 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';

import명령문에서 중괄호 사용을 이해하려면 먼저 ES6에 도입 된 파기 개념을 이해해야합니다.

1. 객체 파괴

   var bodyBuilder = {
     firstname: 'Kai',
     lastname: 'Greene',
     nickname: 'The Predator'
   };
   
   var {firstname, lastname} = bodyBuilder;
   console.log(firstname, lastname); //Kai Greene
   
   firstname = 'Morgan';
   lastname = 'Aste';
   
   console.log(firstname, lastname); // Morgan Aste

2. 배열 파괴

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
   
   console.log(firstGame); // Gran Turismo

   리스트 매칭 사용

     var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
     console.log(secondGame); // Burnout

   스프레드 연산자 사용

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// ['Burnout', 'GTA'];

ES6 에서는 여러 모듈을 내보낼 수 있습니다. 그런 다음 아래와 같이 객체 파괴를 사용할 수 있습니다

라는 모듈이 있다고 가정 해 봅시다. module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

내 보낸 함수를 index.js ;

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

다른 변수 이름을 사용할 수도 있습니다.

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

요약 ES6모듈 :

수출 :

두 가지 유형의 내보내기가 있습니다.

1. 명명 된 수출
2. 기본 내보내기, 모듈 당 최대 1

통사론:

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

수입품 :

수출의 유형 (즉, 이름 또는 기본 수출) 방식 수입 뭔가에 영향을

1. 명명 된 내보내기의 경우 중괄호와 정확한 이름 을 내 보낸 선언 (예 : 변수, 함수 또는 클래스) 으로 사용해야 합니다.
2. 기본 내보내기의 경우 이름을 선택할 수 있습니다.

통사론:

// 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';   

관심 사항 :

1. 이름 이 일치하는 중괄호 안에 쉼표로 구분 된 목록을 사용하십시오. 지정된 내보내기에 대해 하는 내보내기 .
2. 기본 내보내기에는 중괄호없이 선택한 이름을 사용하십시오.

별칭 :

명명 된 가져 오기의 이름을 바꾸려면 별명을 통해 가능 합니다 . 이에 대한 구문은 다음과 같습니다.

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

이제 가져 importantData_1 왔지만 식별자 myData대신입니다 importantData_1.

일반적으로 함수를 내보낼 때는 {}을 사용해야합니다

if you have export const x 

너는 사용한다 import {x} from ''

if you use export default const x 

당신은 사용할 필요가 import X from '' 당신은 당신이 원하는대로 변수 X를 변경할 수 있습니다 여기에

중괄호 ({})는 명명 된 바인딩을 가져 오는 데 사용되며 그 배후에있는 개념은 할당을 파괴합니다.

import 문이 예제와 어떻게 작동하는지에 대한 간단한 데모는 javascript imports에서 '{}' 를 언제 사용합니까? 와 비슷한 질문에 대한 내 대답에서 찾을 수 있습니다 .

중괄호는 내보내기 이름을 지정할 때 가져 오기에만 사용됩니다. 내보내기가 기본값이면 중괄호는 가져 오기에 사용되지 않습니다.

기본 내보내기의 경우 가져올 때 {}를 사용하지 않습니다.

예 :

player.js

export default vx;

index.js

import vx from './player';

index.js

player.js

우리가 내보내는 모든 것을 가져 오려면 *를 사용하십시오.