export vs export default

어떤 컴포넌트, 변수, 함수, 클래스 등을 import할 때 아래의 방법을 사용하여 가지고 올 수 있다.

import {ThisComponent} from './thisComponent.js';
import ThatComponent from './thatComponent.js';
import * from './allComponents.js';

중괄호{}를 사용하여 import를 하는 것이 있는가 하면 중괄호 없이 가지고 오는 것이 있는데, 중괄호의 사용 여부는 export를 하느냐, export default를 하느냐에 따라 결정된다.

export vs export default

export

• {Name} 의 형태를 사용해서 import 한다.
• 한 컴포넌트 내에서 여러 개를 내보낼 때 사용한다.
• import 할 때는 export한 이름 그대로 불러와야 한다.
• 한번에 묶어서 import할 시에는 import * from '...'의 형태를 사용한다.

  export default

• 중괄호 없이 import한다.
• import할 때 export한 이름이 아닌 별개의 이름으로 가져와도 허용된다.
  • 한 컴포넌트/파일에서 한가지만 export했기 때문에 파일 경로만 제대로 지정된다면 이름을 따로 지정해서 사용해도 무방하다.