[Typescript] react, typescript에서 변수를 다른 파일에서 사용할 때 만난 TS1184: Modifiers cannot appear here 오류

const CompanyTable = () => {
  const companyApi = "http://localhost:3030/order-sheets";
};
export default CompanyTable

여기에 있는 CompanyTable 안에 있는 companyApi 변수를 다른 파일에서 사용하려고 바로 export를 걸어봤습니다.

하지만 TS1184: Modifiers cannot appear here. 이렇게 오류가 납니다. 여기에 Modifier(제한자)가 여기 나타날 수 없다고 합니다.

export 문이 함수 바디 내부에 위치하고 있기 때문입니다. export 문은 모듈의 최상위 수준에서만 사용할 수 있습니다.

 

 

 

🟩 왜 export문은 모듈의 최상위에서만 사용할 수 있을까요?

export 문은 모듈 시스템에서 사용되며, 모듈 시스템은 파일 단위로 동작합니다.해당 모듈에서 공개할 변수, 함수, 클래스 등을 명시하는 역할을 합니다. export 문이 모듈 파일의 중간이나 다른 함수, 블록 내부에서 사용된다면 해당 모듈에서 공개할 대상을 명확하게 정의할 수 없게 되기 때문입니다.

export 문이 다른 함수나 블록 내부에서 사용되면, js 엔진이 해당 대상들이 외부에서 접근 불가능한 것으로 판단해서 문법적으로 오류가 발생합니다.

따라서 export 문은 모듈 파일의 최상위 레벨에서만 사용하여, 해당 모듈에서 공개할 대상을 명확하게 정의하도록 해야 합니다.

 

export const companyApi = "http://localhost:3030/order-sheets";
const CompanyTable = () => {
  
};
export default CompanyTable

전역으로 빼서 export를 걸 수 있습니다.