명백한 것처럼 보이지만 ES6에서 단일 모듈을 가져 오기 위해 중괄호를 사용해야 할 때 약간 혼란 스럽습니다. 예를 들어, 내가 작업하고있는 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 initialState from './todoInitialState';
initialState
중괄호로 묶으면 다음 코드 줄에 대해 다음 오류가 발생합니다.
정의되지 않은 속성 작업을 읽을 수 없습니다
TodoReducer.js :
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'
기본 내보내기는 일반적으로 모듈에서 얻을 것으로 예상되는 모든 용도로 사용되는 경향이 있습니다. 명명 된 내보내기는 편리한 유틸리티에 사용되는 경향이 있지만 항상 필요한 것은 아닙니다. 그러나 내보내기 방법을 선택하는 것은 사용자의 몫입니다. 예를 들어, 모듈에는 기본 내보내기가 전혀 없을 수 있습니다.
답변
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에 도입 된 파기 개념을 이해해야합니다.
-
객체 파괴
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
-
배열 파괴
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
통사론:
// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}
수입품 :
수출의 유형 (즉, 이름 또는 기본 수출) 방식 수입 뭔가에 영향을
- 명명 된 내보내기의 경우 중괄호와 정확한 이름 을 내 보낸 선언 (예 : 변수, 함수 또는 클래스) 으로 사용해야 합니다.
- 기본 내보내기의 경우 이름을 선택할 수 있습니다.
통사론:
// 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 { importantData_1 as myData } from './A';
이제 가져 importantData_1
왔지만 식별자 myData
대신입니다 importantData_1
.
![](http://daplus.net/wp-content/uploads/2023/04/coupang_part-e1630022808943-2.png)