itsource

React에서 내보내기(기본값) 클래스JS

mycopycode 2023. 2. 26. 09:44
반응형

React에서 내보내기(기본값) 클래스JS

컴포넌트를 만드는 경우 다양한 방법으로 클래스를 만들 수 있습니다.이것들은 무엇이 다릅니까?어떤 것을 사용해야 하는지 어떻게 알 수 있나요?

import React, {Component} from 'react'

export default class Header extends Component {

}

export const Header = React.createClass({

})

export default React.createClass({

})

다른 일을 하는 것 같아요 아니면 그냥 구문만 다를 뿐인가요?

누군가 간단한 설명이나 링크를 주시면 감사하겠습니다.차이가 무엇인지 정확히 알지 못하는 상태에서 새로운 틀로 시작하고 싶지는 않습니다.

React에 오신 것을 환영합니다!

이 문제 중 일부는 React 고유의 문제가 아니라 새로운 ES2015 모듈 구문과 관련이 있다고 생각합니다.React 클래스 컴포넌트를 작성할 때 대부분의 목적과 목적을 생각할 수 있습니다.React.createClass기능적으로 와 동등하다class MyComponent extends React.Component하나는 새로운 ES2015 클래스 구문만 사용하고 다른 하나는 ES2015 이전 구문을 사용하고 있습니다.

모듈에 대해 알아보려면 새로운 모듈 구문에 대한 몇 가지 기사를 읽고 익숙해지길 권합니다.우선 http://www.2ality.com/2014/09/es6-modules-final.html부터 시작하는 것이 좋습니다.

즉, 구문의 차이일 뿐입니다만, 간단하게 설명하겠습니다.

/**
 * This is how you import stuff.  In this case you're actually 
 * importing two things:  React itself and just the "Component" 
 * part from React.  Importing the "Component" part by itself makes it
 * so that you can do something like:
 *
 * class MyComponent extends Component ...
 * 
 * instead of...
 * 
 * class MyComponent extends React.Component
 * 
 * Also note the comma below
 */
import React, {Component} from 'react';


/**
 * This is a "default" export.  That means when you import 
 * this module you can do so without needing a specific module
 * name or brackets, e.g.
 * 
 * import Header from './header';
 *
 * instead of...
 *
 * import { Header } from './header';
 */
export default class Header extends Component {

}

/**
 * This is a named export.  That means you must explicitly
 * import "Header" when importing this module, e.g.
 *
 * import { Header } from './header';
 *
 * instead of...
 * 
 * import Header from './header';
 */
export const Header = React.createClass({

})

/**
 * This is another "default" export, only just with a 
 * little more shorthand syntax.  It'd be functionally 
 * equivalent to doing:
 *
 * const MyClass = React.createClass({ ... });
 * export default MyClass;
 */
export default React.createClass({

})

언급URL : https://stackoverflow.com/questions/34840708/export-default-class-in-reactjs

반응형