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

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 문은 모듈 에서 함수, 객체 또는 기본 값을 내보내는 JavaScript 모듈 을 생성 할 때 사용 되므로 import 문을 사용하여 다른 프로그램에서 사용할 수 있습니다.

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

---

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

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

기본 내보내기 :

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

수출 또는 지정 수출 :

1. 동일한 이름의 객체 (변수, 함수, calss)를 내보낼 때 사용합니다.

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

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

React, Vue 및 기타 많은 프레임 워크에서 Export는 주로 재사용 가능한 구성 요소를 내보내 모듈 식 기반 애플리케이션을 만드는 데 사용됩니다.

---

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

When export default is used, this is much simpler. Script files just exports one thing. cube.js

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

and used as App.js

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

참고URL : https://stackoverflow.com/questions/36426521/what-does-export-default-do-in-jsx