export의 함수명과 import의 함수명 관련 문의드립니다.

Question

main/index.js에서 컴포넌트 함수명(MainPage)와 App.js에서 import 하는 함수명(MainPageComponent)가 달라도 괜찮은 이유가 뭔가요? 혹시 한 js파일에서는 export를 한 개의 컴포넌트만 할 수 있어서 그런건가요?(컴포넌트는 여러개 만들어도 문제가 괜찮던데 export를 2번 쓰니까 빨간줄이 생겨요.)

그랩 · Answer

export 방식은 named export(export const 변수명 = ...)와 default export(export default 변수) 두가지가 존재합니다. default export 방식으로 하는 경우 하나의 모듈(파일)에서 딱 하나만 export할 수 있게 되며 named export는 여러개를 export해도 상관이 없습니다. default export는 딱 하나만 export할 수 있기에 이름을 import 하는 측에서 변경해서 입력해도 문제가 없습니다(내부적으로 확인이 가능하기 때문이죠) 다만 보통은 이름을 맞춰서 넣어주는 게 코드를 읽을 때 편하긴 하겠죠? 아래에 설명이 잘된 글이 있어 공유드립니다! https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-import-export-%EC%A0%95%EB%A6%AC

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴이에요. export의 함수명과 import의 함수명이 다른 경우에도 동작하는 이유는 JavaScript에서는 export와 import 구문을 사용하여 다른 파일에서 모듈을 임포트하고 익스포트할 수 있기 때문입니다. 한 js 파일에서는 여러 개의 컴포넌트를 생성하고 익스포트할 수 있습니다. export는 파일의 범위 내에서 얼마든지 사용할 수 있으며, export된 모듈은 다른 파일에서 import하여 사용할 수 있습니다. 따라서, export와 import 구문에서 사용된 함수명이 다르더라도 상관없이 동작합니다. 하지만 코드의 가독성을 위해 import하는 함수명과 함수명이 일치하도록 작성하는 것이 좋습니다. 또한, 컴포넌트를 export할 때는 한 파일에서 하나의 컴포넌트만 export 하는 것이 일반적입니다. export를 2번 사용했을 때 빨간 줄이 생기는 것은 코드 작성 규칙으로 인해 발생하는 것일 수 있습니다. 이 경우, 빨간 줄이 나타나더라도 코드가 동작하는데에는 문제가 없으며 컴파일러나 IDE에 의한 경고일 수 있습니다. 더 자세한 내용은 JavaScript 모듈 시스템에 관한 문서를 참고하시면 도움이 될 것입니다. 감사합니다.