JSX에서 "내보내기 기본값"은 무엇입니까?

마지막 문장의 의미와 의미를 묻고 싶습니다 (기본 HelloWorld 내보내기). 그러나 그것에 대한 자습서를 찾을 수 없습니다.

// hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

수출 과 같은 export default HelloWorld;및 가져 오기 등은 import React from 'react'의 일부 ES6 모듈 시스템 .

모듈은 사용하는 다른 모듈 자산에 노출 할 수있는 자체 포함 된 유닛이다 export하여 다른 모듈로부터 획득하고 자산 import.

귀하의 코드에서 :

import React from 'react'; // get the React object from the react module

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld; // expose the HelloWorld component to other modules

ES6에는 두 가지 종류의 내보내기가 있습니다.

이름이 지정된 내보내기 -예를 들어 export function func() {}이름이 이름이 지정된 내보내기입니다 func. 명명 된 모듈을 사용 import { exportName } from 'module';.하여 가져올 수 있습니다 .이 경우 가져 오기 이름은 내보내기 이름과 같아야합니다. 예제에서 func을 가져 오려면을 사용해야 import { func } from 'module';합니다. 하나의 모듈에는 여러 개의 명명 된 내보내기가있을 수 있습니다.

기본 내보내기 -간단한 import 문을 사용하는 경우 모듈에서 가져올 값입니다 import X from 'module'. X는 값을 포함하도록 지정된 변수에 로컬로 제공되는 이름이며 원점 내보내기와 같이 이름을 지정할 필요는 없습니다. 기본 내보내기는 하나만있을 수 있습니다.

모듈은 명명 된 내보내기와 기본 내보내기를 모두 포함 할 수 있으며을 사용하여 함께 가져올 수 있습니다 import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

export default 스크립트 파일에서 단일 클래스, 함수 또는 프리미티브를 내보내는 데 사용됩니다.

내보내기는 다음과 같이 쓸 수도 있습니다.

export default class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

이것을 다음과 같은 함수 구성 요소로 작성할 수도 있습니다.

export default const HelloWorld = () => (<p>Hello, world!</p>);

다른 스크립트 파일에서이 함수를 가져 오는 데 사용됩니다.

import HelloWorld from './HelloWorld';

HelloWorld기본 내보내기이므로 이름을 지정할 수 있으므로 반드시 가져 오지 않아도됩니다.

수출에 대해 조금

이름에서 알 수 있듯이 스크립트 파일 또는 모듈에서 함수, 객체, 클래스 또는 표현식을 내보내는 데 사용됩니다.

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

가져 와서 사용할 수 있습니다

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

또는

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

내보내기 기본값을 사용하면 훨씬 간단합니다. 스크립트 파일은 하나만 내 보냅니다. cube.js

export default function cube(x) {
  return x * x * x;
};

App.js로 사용

import Cube from 'cube';
console.log(Cube(3)); // 27

간단한 단어로-

export 문은 모듈 에서 함수, 객체 또는 기본 값을 내보내는 JavaScript 모듈 을 작성할 때 사용 되므로 import 문으로 다른 프로그램에서 사용할 수 있습니다.

다음은 명확한 이해를위한 링크입니다. MDN Web Docs

에 대한 가장 간단한 이해 default export는

Export ES6의 기능은 모듈 (파일)을 내보내고 다른 모듈 (파일)에서 사용하는 데 사용됩니다.

기본 내보내기 :

1. default export 파일 (모듈)에서 하나의 객체 (변수, 함수, 클래스) 만 내보내려면 규칙입니다.
2. 파일 당 하나의 기본 내보내기 만있을 수 있지만 하나의 내보내기에만 국한되지는 않습니다 .
3. 내 보낸 기본 개체를 가져올 때 이름을 바꿀 수도 있습니다.

수출 또는 명명 수출 :

1. 같은 이름으로 객체 (변수, 함수, calss)를 내보내는 데 사용됩니다.

2. 하나의 파일에서 여러 객체를 내보내는 데 사용됩니다.

3. 다른 파일로 가져올 때 이름을 바꿀 수 없으며 파일을 내보내는 데 사용한 이름과 같아야합니다.

React, Vue 및 기타 여러 프레임 워크에서 Export는 주로 재사용 가능한 구성 요소를 내보내 모듈 식 기반 응용 프로그램을 만드는 데 사용됩니다.