[js] export default const가 안된다 : import, export

 

리액트 프로젝트에서 항상

export default function Hi(){}

와 같이 컴포넌트를 내보냈는데

 

 export default const Hi = () => {}

와 같이 컴포넌트 코드 스타일을 화살표 함수로 바꾸는 과정에서 오류가 났다

똑같은 원리인데 안되는 것이 이해가 안되어서 import, export 문을 좀 보았다

 

js에서는 함수나 변수 등을 선언하고 export를 하여 모듈을 내보내고 import 하여 내보낸 모듈을 사용할 수 있다

export를 사용할 때 export와 export default를 사용할 수 있는데 차이점은 아래와 같다

 

 

 

export

• named export라고 하며 하나의 모듈에서 한개 이상의 값들을 내보낼 수 있다
• {}를 사용하여 구체적인 이름을 명시하여 import 해아한다
• import 할 때는 export 한 이름으로 받아와야된다 ( as 로 변경은 가능)
• export시 사용한 이름 그대로 가져오므로 관련 정보를 파악하기 쉽다

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

import { add, subtract } from './math'

 

 

export default

• 하나의 모듈(파일)에서 하나만 내보낼 수 있다
• import 할 때 자연스럽게 작명이 가능하다 
• 작명을 할 수 있기 때문에 규칙을 정해 놓을 필요가 있다

export default function Add {
}

import 작명한거 from './math';

 

 

 

 

 

 

그래서 왜 안되는거였나 export default const는? (export default function은 되었으면서)

결론은, export default 자체가 선언과 값을 동시에 내보내기 위한 키워드로 사용되기 때문이다

 

export default는 다음과 같은 구조로 작동한다

• 값을 직접 export
  • export default 1, export default function (){}처럼 값을 export 가능
• 선언된 항목 export
  • 선언된 변수나 함수, 변수 등을 export default로 내보내기( 선언과 export문 분리)
  • const hi = 1; export default hi;

 

export default function myFunction() {}

문법적으로 완결된 함수 선언과 내보내기가 하나의 문에서 가능하므로 허용되며, 이는 js 모듈 시스템이 함수 선언문을 직접 내보내기 가능하도록 설계되었기 때문

 

export default const myFunction = () => {}

변수 선언과 값의 할당이라는 두 가지 작업을 포함하기 때문에, 내보내기를 위해서는 별도의 문장이 필요하다. 그리고, export default 문법은 변수 선언(const, let, var)을 직접 포함할 수 없다.

 

결국, 선언한 것은 바로 되지만, 선언 후 할당까지 된 것은 안되는 것 같다

 

export default function myFunction() {}

function myFunction() {}
export default myFunction;

const myFunction(){}
export default myFunction;

과 같이 export default 문을 사용하면 될거 같다!

 

 

 

 

 

 

export vs export default

이것과 별개로 둘을 자세히 알아보니 export를 주로 사용하는게 더 나을 것 같다는 생각이 들었다!

export default는 작명이 너무 자연스러우니 나중에 헷갈릴 소지가 있을 듯 싶었다

 

추가로, import * 는 잘 안쓰는게 좋다라는 생각을 메모

• 모듈에서 제공하는 모든 기능을 메모리에 로드되는데 앱 성능이 저하될 위험이 있다
• 지역 변수와 혼동이 생길 수 있고, 어디서 왔는지 파악하기가 힘들어 유지보수 및 리팩토링이 힘들다!