ES6 Import 스테이트먼트에서 곱슬곱슬한 중괄호의 사용법은 무엇입니까?

ES6 Import 스테이트먼트에서 곱슬곱슬한 중괄호의 사용법은 무엇입니까?

Import에는 다음 두 가지 방법이 있습니다.

import React from 'react'
import { render } from 'react-dom'

두 번째 것은 괄호입니다.그 둘의 차이점은 무엇입니까?그리고 언제 괄호를 추가해야 하나요?

컴포넌트를 괄호 안에 Import할 것인지, 아니면 괄호 안에 Import하지 않을 것인지의 차이는 컴포넌트를 Import할 것인지에 따라 달라집니다.export바로 그거에요.

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

1. 디폴트 내보내기
2. 이름 있는 내보내기

구성 요소에는 기본 내보내기가 하나이고 이름이 지정된 내보내기가 0개 이상 있을 수 있습니다.

컴포넌트가 기본 내보내기인 경우 괄호 없이 Import해야 합니다.

예.,

export default App;

로서 Import 합니다.

import App from './path/to/App';

이름 있는 내보내기는 다음과 같을 수 있습니다.

export const A = 25;

또는

export {MyComponent};

다음으로 Import할 수 있습니다.

import {A} from './path/to/A';

또는

import {A as SomeName} from './path/to/A';

컴포넌트에 기본 내보내기가 1개이고 이름이 지정된 내보내기가 적은 경우 Import 중에 함께 사용할 수도 있습니다.

import App, {A as SomeName} from './path/to/file';

같은 경우react그리고.react-dom,React그리고.ReactDOM이다default exports예를 들어 각각Component는 입니다.named export에react그리고.render에서의 이름 있는 내보내기입니다.react-dom그게 바로 당신이 할 수 있는 이유야

import ReactDOM from 'react-dom';

그런 다음 사용

ReactDOM.render()

질문하신 대로 사용하시면 됩니다.

우선, 다른 모든 답변에 감사드립니다.

위의 모든 내용을 하나의 답변으로 요약합니다.

예제를 사용한 컨텍스트

import React from 'react';          // Importing without braces
import { render } from 'react-dom'; // Importing with braces

이해할 수 있다import, 우선 이 점을 이해하는 것이 중요합니다.export및 그 종류.

내보내기 유형

수출에는 주로 '디폴트'와 '이름부여'의 두 가지 유형이 있습니다.중괄호를 사용할지 여부는 Import되는 내보내기 변수 유형에 전적으로 의존합니다.

즉, 기본적으로 내보낸 변수는 중괄호가 필요하지 않지만 명명된 변수는 중괄호로 가져올 필요가 있습니다.

이제 두 가지 유형을 모두 가져오고 내보내는 방법에 대한 몇 가지 실제 예를 살펴보겠습니다.

디폴트:내보내기 및 Import 방법

• 내보내기

// Module1.js
export default App;

// Module2.js
export default myVariable;

// Module3.js
export default myFunction;

// Please note that there can only be one default export per module!

• Import

import App from './Module1'
import AppRenamed from './Module1'

import myVariable from, './Module2'
import myFunction from './Module3'

// Please note that default modules can be renamed when importing
// ... and they will still work!

이름: 내보내기 및 Import 방법

• 내보내기

export const A = 42
export const myA = 43
export const Something = 44

export { cube, foo, graph };

// Note how there can be several named exports per module
// exported in groups or individually

• Import

import { A, myA } from './my-module.js';
import { Something as aRenamedVar } from './my-module.js';
import { cube } from './my-module.js';
import { foo, graph } from './my-module.js';

// Likewise, named exports can be imported in groups or individually

기타 주의사항

• 위에서 본 첫 번째 예를 다시 살펴봅시다.

import React from 'react'
import { render } from 'react-dom'

• 그래도 알아두시기 바랍니다.React교정기를 사용하지 않습니다.render한다,render실제로 의 일부입니다.react-dom.
• 따라서 전체 기본값을 가져올 수도 있습니다.react-dom교정기 없이 사용render

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render()

고려하다primitives.js,

export default (a, b) => a + b;
export const sub = (a, b) => a - b;
export const sqr = a => a**2;

이렇게 수입할 수 있는데

import sum, { sub, sqr } from './primitives';

이 경우,sum는 '디폴트 내보내기'라고 불리며 모듈에는 '디폴트 내보내기'가1개만 포함할 수 있습니다.

sub그리고.sqr는 "Named Export"라고 불리며 모듈에는 여러 개의 Named Export를 포함할 수 있습니다.

가져오는 데 물결 괄호가 사용됩니다.single(specific) property는 ", " " 입니다.import entire object일을만만 만만만다다

예를들면,

import React, { Component } from 'react';

, 여기 '아까운데'가 있어요.React가져오기 타 가져오기 냅 다)를 가져옵니다.entire object파일 일 from'react'.

{Component} means we specify to import the 를 Import 하도록 지정하는 것을 의미합니다.particular property파일에서파일을 참조해 주세요.

기본적으로 내보내는 경우 대괄호를 추가할 필요가 없습니다.모듈에는 디폴트만 설정할 수 있습니다.

케이스 1:

export default function(num1, num2) {
    return num1 + num2; }

케이스 2:

function sum(num1, num2) {
    return num1 + num2; }

export { sum as default };

케이스 3:

function sum(num1, num2) {
    return num1 + num2; }

export default sum;

기본값을 가져올 수 있습니다.

import sum from "./test.js";

console.log(sum(1, 2));

언급URL : https://stackoverflow.com/questions/41337709/what-is-use-of-curly-braces-in-an-es6-import-statement