TIL

[React] Default Export & Named Export

rachel_13 2022. 7. 31. 19:47

*Default Export *: 하나의 파일에서 단 하나의 변수 또는 클래스 등으로만 export 한다.

const MyComponents = ( ) => {
    ...
}

export default MyComponents
  • import 할 때는 아무 이름으로나 import 할 수 있다.
  • 참고* : var, let,const`를 바로 default 할 수 없다.

Named Export : 한 파일 내에서 여러 변수 또는 클래스 등으로 export 할 수 있다.

  • Named export 방식 사용시 중괄호로 감싸야 한다.
  • 여러 값을 내보낼 때 유용하다. export 시 import한 이름과 동일한 이름을 사용해야 한다.
    따라서 식별자 충돌을 피하기 위해서 export시 이름을 바꿔줄 수도 있다.
    (단, as를 사용해서 바꿔야 한다.)
  • as를 사용하면 한 파일에 있는 클래스/변수들을 한 번에 import 할 수 있다.
import { MyFirstClass as MyComponents, MySecondClass } from './MyClass'