Default Export, Named Export

리액트는 각 컴포넌트마다 export 를 해줘야 다른 곳에서 사용할 수 있다. 

 

이때 export의 방식은 두 가지가 존재한다. 

import React, { Component } from 'react';

여기서 React가 default, { Component }가 named export이다. 

 

 

Default Export

컴포넌트 당 하나의 default export가 존재한다.

default export로  변수, 객체, 함수, 클래스 모두 올 수 있으며, 해당 컴포넌트의 제일 마지막 줄에 작성하면 된다. 

export default 클래스명

 

Named Export

반면 named export는 식별자를 통해 import가 가능하다. 

위에 있는 { Component }도 react 안에 이름이 저장되어 사용할 수 있는 것이다. 

// { Component }를 작성하지 않았다면, class 선언할 때 React.Component
// 그냥 Component로 해도 불러와지지만 확실하게 불러오기 위해 React.Component를 써야 한다
import React from 'react';

const abc = class App extends React.Component { // 앞에 export를 적어준다
	// 내용
}

export { abc };

// 다른 곳에서 불러올때
import { abc } from 'App.js'