JS 가져오기 내보내기

심채운·2022년 7월 21일
0

JavaScript

목록 보기
9/14

import,export

js라는 확장자로 끝나는 하나의 js파일에서는 외부에 있는 js파일을 import 키워드로 가져올 수 있고 혹은 그 파일내에서 특정한 내용을 export 라는 키워드로 내보내기를 할 수 도있다.

외부의 js파일을 가져올 수 있는 통로 = import
js파일은 특정내용을 내보낼 수 있는 통로가 2개 있다. default export(이름을 따로 지정하지 않는), named export(이름이 필요한)

js파일은 언제든 모듈이 될 준비가 되어있다.
만약 export default로 함수를 내보낸다면 함수명을 따로 명시해줄 필요가 없다. 또한 기본통로로 빠져나가는 데이터는 따로 이름을 활용하는 것이 아니기 때문에 main.js에서 불러올 때도 원하는 이름으로 활용이 가능하다.
이름이 필요한 통로 즉 함수명이 명시되어 있는 export는 가져오고자 하는 파일에 그냥 이름만 명시하면 에러가 난다. 그래서 이름이 지정된 통로에서 나올 경우에는 데이터를 {}로 묶어서 마치 객체 구조분해 문법처럼 데이터의 이름을 가져와 사용해야한다.

기본통로 vs 이름통로 차이점

  • 기본통로는 하나의 파일에서 하나의 데이터만 내보낼 수 있다.
  • 이름을 지정해야하는 파일에선 이름만 저장되어 있으면 어떤 데이터든 몇개든 상관이 없다.

그래서 js파일에서 어떤 특정내용을 한번만 내보내면 된다 하면 되도록 export default 사용, 그렇지 않고 내보낼 내용이 많으면 이름을 지정하는 default 키워드가 없는 export를 사용하면 된다.
그리고 구조분해 할당에서도 추출한 데이터명이 마음에 들지 않으면 : 기호로 원하는 이름을 바꿨는데 import문법도 이러한 부분을 지원한다. 하지만 import에서는 : 기호가 아닌 as로 써야한다.
그리고 Named export 에서 따로따로가 아닌 한번에 데이터를 가져오고싶으면 import * as 변수명 from '경로.js'
그리고 이때 에스터리스크(*)를 와일드카드(Wildcard Character)라고 부르고 '여러내용을 한꺼번에 지정할 목적으로 사용하는 기호를 가리킨다'라는 의미이다.
이렇게 한꺼번에 불러오게 되면 하나의 js파일에 Named export, export default 둘다 사용할 수가 있다.

profile
불가능, 그것은 사실이 아니라 하나의 의견일 뿐이다. - 무하마드 알리

0개의 댓글