반응형
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
반응형
'itsource' 카테고리의 다른 글
잭슨:열거형 값을 정수로 직렬화 및 직렬화 해제 (0) | 2023.02.26 |
---|---|
Oracle IN 절에 1000개 이상의 값을 입력하는 방법 (0) | 2023.02.26 |
MongoDB의 멀티 테넌트(Multi-tenant) 데이터베이스에 대해 권장되는 접근 방식은 무엇입니까? (0) | 2023.02.26 |
워드프레스에서 get_terms와 get_the_terms의 차이점은 무엇입니까? (0) | 2023.02.26 |
applications.properties에서 스프링 부팅을 위한 데이터베이스 application.yml (0) | 2023.02.26 |