export문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서import문으로 가져가 사용할 수 있습니다.
프로젝트의 규모가 점점 거대해 질수록 우리는 세분화된 많은 파일들을 마주하게 됩니다. 이 파일들은 각각의 용도에 맞게 폴더에 담겨져 있을 것입니다. 우리가 파일과 폴더의 구조를 정리하는 이유에는 각각의 개별적인 파일들을 필요에 따라 직관적으로 찾아 쓸수 있게 하는 의도도 있을 것입니다. 그렇다면 이 파일들이 엉키지 않고 개별성을 유지하면서 유기적으로 사용 되게 하기 위한 규칙도 필요합니다. 이것을 가능하게 해주는 것이 export, import 문법입니다.
React 프로젝트를 만들때도 javascript의 export, import 문법을 사용할수 있습니다. 그리고 이것을 각 파일마다 해주면 무척 번거로울 수 있기 때문에 index.js 파일을 사용하여 re-export 해줄수 있습니다.
각 폴더의 루트에 있는 index.js 파일을 사용하여 파일의 하위 세트를 다시 내보내면 React 모듈에 대한 명시적인 public interfaces를 효과적으로 만들 수 있습니다.
ES6에서는 폴더에 index.js 파일을 가지고있으면, 웹 서버가 index.html를 URL에 명시적으로 넣을 필요 없이 폴더에 있는 index.html를 서비스 하는것과 마찬가지로, import문에 index.js를 지정하지 않고 폴더에서 암묵적으로 가져오기를 수행할 수 있습니다. 이로 인해 모듈에서 내보내는 내용과 앱의 다른 섹션에서 가져오고 사용할 수 있는 내용에 대한 제어 기능이 어느 정도 나타납니다. 즉, 특정 파일을 노출하는 동시에 다른 파일을 ‘Private’하게 유지하는 공개 인터페이스를 만들 수 있습니다.
Named export
index.js 파일은 이런 모습을 띄게 될 것입니다. components 폴더에 있는 index.js 파일이라고 가정해 봅시다. (components에 App과 Home이 있는것이 의아하지만 가정해 봅시다.)
이 두가지는 동일하게 작동됩니다. export default 를 사용하여 컴포넌트 모듈을 다시 내보내는것은 의아하게 느껴질수 있지만 default를 renaming하는 것으로 가능해집니다.
components 폴더와 형제 계층에 있는 폴더 내의 파일에서는 아래와 같은 방식으로 import 해줄수 있습니다.
import하는 파일과 component 폴더의 구조 관계에 맞춰 경로설정을 해주면 이와 같이 export한 파일을 필요한 만큼 불러올 수 있습니다.
Export default
만일 index.js에서 export default로 내보내기한다면 어떻게 될까요?
기본적으로 export default로 내보내기를 하게된다면 모듈은 디렉토리 명으로 명시될 것입니다. 따라서 import 구문도 조금 변경되어야 합니다.
즉 component 객체 내에 모듈들이 들어있다고 볼수 있습니다. 컴포넌트가 아닌 함수의 경우에는 hooks.useMaker등의 사용도 가능합니다.
이슈가 있기 때문에 export default를 사용하기보다 named export 사용이 권장되고 있습니다. (링크참조) 따라서 두번째 방식보다는 첫번째로 소개드린 방식을 권장드리며 글을 마무리하려고 합니다.
이번 글에서는 헷갈릴 수 있는 export default와 named export를 정리해 보았습니다. 두가지 방식이 섞이게 된다면 에러가 발생하게 되지만(ㅜㅜ) 한번 익숙해지면 두고두고 써먹을수 있는 주제라고 생각되어 기록해 보았습니다. 초심자의 글이기 때문에 잘못된 사항에 대한 피드백은 성장에 큰 도움이 되기때문에 항상 기다리는 마음으로 열려있답니다! 저와 같은 주제를 궁금해하셨던 분께 조금이라도 유익하기를 바라며 글을 마치겠습니다. 읽어주셔서 감사합니다 :)
