JSX에서 "export default"는 무엇을 합니까?

JSX에서 "export default"는 무엇을 합니까?

마지막 문장이 무엇을 의미하는지 묻고 싶지만(기본 HelloWorld 내보내기;) 튜토리얼을 찾을 수 없습니다.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

exportexport default HelloWorld;Import를 실시합니다.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'; 의 모듈에 있는 를 포함할 수 1개의 모듈에 여러 개의 이름 있는 내보내기를 포함할 수 있습니다.

기본 내보내기 - 단순 가져오기 문을 사용하는 경우 모듈에서 가져오는 값입니다.import X from 'module'으로, 는 없습니다 X는 값을 포함하도록 할당된 변수에 로컬로 지정되는 이름으로, 오리진 내보내기처럼 이름을 지정할 필요는 없습니다.1번으로 하다

에는 이름 와 기본 export를 모두 할 수 또, 이러한 export는, 「」를 사용해 할 수 .이러한 내보내기들은 다음 명령을 사용하여 함께 Import할 수 있습니다.import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

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

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

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

이것을 다음과 같은 함수 컴포넌트로 쓸 수도 있습니다.

export default function HelloWorld() {
  return <p>Hello, world!</p>
}

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

import HelloWorld from './HelloWorld';

''라고 하는 것은 .HelloWorld 수

수출에 대해서

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

유틸리티js

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

이것은 Import하여 다음과 같이 사용할 수 있습니다.

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

export default를 사용하면 이는 훨씬 단순해집니다.스크립트 파일은 큐브 하나만 내보냅니다.js

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

App.js로 사용됩니다.

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

의 가장 default export하고 있다

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

기본 내보내기:

1. default export 파일(filename)에서 오브젝트(function, class)를 1개만 내보내는 경우의 표기법입니다.
2. 파일당 기본 내보내기는 1개뿐이지만 내보내기(이름 있는 내보내기)는 1개로 제한되지 않습니다.
3. 기본 내보내기 개체를 가져올 때 이름을 바꿀 수도 있습니다.

내보내기 또는 이름 있는 내보내기:

1. 동일한 이름으로 개체(변수, 함수, 클래스)를 내보내는 데 사용됩니다.

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

3. 때 을 바꿀 수 때 . 는 에일리어스를 사용할 수 . 내보낼 때 사용한 이름과 동일해야 합니다. 단, 을 사용하여 별칭을 만들 수 있습니다.as환입니니다다

React, Vue 및 기타 많은 프레임워크에서 Export는 모듈러 기반 애플리케이션을 만들기 위해 재사용 가능한 컴포넌트를 내보내는 데 주로 사용됩니다.

알기 쉽게 말하면 -

내보내기 스테이트먼트는 JavaScript 모듈을 작성할 때 import 스테이트먼트와 함께 다른 프로그램에서 사용할 수 있도록 모듈에서 함수, 오브젝트 또는 프리미티브 값을 내보낼 때 사용됩니다.

MDN Web Docs에 대한 이해를 돕기 위한 링크를 다음에 나타냅니다.

export라는 간단한 단어에서는 작성한 스크립트를 다른 스크립트에서 사용할 수 있도록 하는 것을 의미합니다.export라고 하면 어떤 모듈에서도 Import를 통해 이 스크립트를 사용할 수 있습니다.

• Export Default에 대해 알아보기 전에 Export and Import에 대해 알아보겠습니다.일반적으로 export는 다른 사람에게 보낼 수 있는 상품과 서비스입니다.또한 함수 컴포넌트로 내보내면 기능 또는 컴포넌트가 다른 스크립트에 의해 사용될 수 있습니다.
• export default는 스크립트에 기본적으로 존재하는 값을 1개만 내보내고 다른 스크립트가 해당 값을 Import하여 사용할 수 있도록 하는 것을 의미합니다.
• 이것은 코드 재사용에 매우 필요합니다.

사용 방법을 알아보겠습니다.

import react from 'react'

function Header() {
  return <p><b><h1>This is the Heading section</h1></b></p>;
}

export default Header;

• 이 내보내기 때문에 이렇게 가져올 수 있습니다.

  import React from 'react';
  import reactDom from 'react-dom';
  import Header from './Header';
  
  reactDom.render(
    <>
      <Header />
    </>, document.getElementById('root')
  )
  

• export섹션에는 다음 오류가 표시됩니다.

  import react from 'react'
  
  function Header() {
    return <p><b><h1>This is the Heading section</h1></b></p>;
  }
  
  // export default Header;
  

다음과 같은 오류가 나타납니다.

(제 답변은 좀 엉성할 수 있습니다.누군가 개선해서 이 코멘트를 빼주시면 감사하겠습니다.)좋은 답변이 많네요.그럼 왜 다른 글을 쓰죠?무한한 옵션을 갖춘 API의 압도적인 신참들과 관련된 모든 것.실제로 자주 사용되는 것은 극소수입니다.이것은 일반적인 경우를 커버하기 위한 것입니다.MDN 내보내기에 대한 자세한 내용은 여기를 참조하십시오.

대부분의 경우 'export default(내보내기 기본값)'는 질문에서와 같이 사용됩니다.입니다.[ 1 개파。export default HelloWorld] 그러면 HelloWorld()가 명령어를 사용하여 Import되는 다른 파일에 표시됩니다.

import HelloWorld from 'hello-world';

HelloWorld()    // prints [Hello, world!] in the browser

신입사원을 혼란스럽게 하는 변종이 하나 있습니다. 내보내기 디폴트는 1개뿐이기 때문에 Import 파일에서는 원하는 대로 부를 수 있습니다.따라서 다음 코드도 정확합니다.

import abracadabra from 'hello-world';

abracadabra()    // prints [Hello, world!] in the browser

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