인스타그램 클론 프로젝트에서 react 사용 Refactoring 을 진행 하다가 named export와 export deafault의 차이에 대해서 찾아 보게 되었다.

Export

export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있다.

React는 각 component 마다 export를 해주어야 다른 곳에서 사용할 수 있다.

export 방식에는 named export와 default export가 있다.

Default export

import React from 'react';

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

• 단일 값을 내보낼 때 사용가능하다.
• import 할때는 export 할 때 어떤 이름으로도 import 가능하다. ( 다른 파일로 가져 올 때 이름을 바꿀 수 있다. )
• 이름없는 함수나 클래스를 내보낼 수 있다.

Named export

import React from 'react';

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

export default HelloWorld; 

• 여러 값(여러 개체)을 내보낼 때 유용하다.
• import 할때는 export 할 때 동일한 이름을 사용해야 한다.