221220 TIL (import export)

얼마 전 기능을 구현하고자 dispatch를 사용했었다.

그런데 dispatch부분만 주석을 제거하면 자꾸 에러가 발생했다.

결론부터 말하자면 thunk함수를 import하는데, 중괄호로 감싸지 않았기 때문이었다.

 

그래서 오늘은 이 중괄호를 사용해야하는 것과 아닌 것을 구분해보려고한다.

 

export { react  };

export const angular = 3;

export default vue;

여기서 위 3가지는 아래와 같이 임포트 할 수 있다.

import view, { react, angular as ANGULAR } from 'App.js'

 

1. react변수는 중괄호를 사용하여 그 내부에서 임포트해야한다.

 

2. view는 어디서 나온 것 일까? vue를 view로 명명한 것 뿐이다. 이는 어떤 변수명을 사용하던 상관이 없다,

APP.js에서 vue변수에 default키워드를 붙여 export했기 때문이다.

이 default가 붙은 변수는 App.js에서 기본으로 지정한 변수이기 때문에 ...from 'App.js'에서 중괄호 없이 임포트되는 변수는 무조건 vue가 된다.

무조건 vue로 고정되어있기 때문에 어떠한 이름이든 상관없이 선언될 수 있고, 중괄호도 필요없다.

반대로 default가 붙지 않은 변수는 중괄호를 사용하여 임포트해야한다.

 

3. angular 역시 default가 없이 export되었기 때문에 중괄호 내에서 선언해야한다.

그런데 as라는 키워드가 붙고 그 뒤에 ANGULAR라는 대문자도 붙어있다. 바로 angular변수의 alias를 지정한다는 것이다.

alias기능이 있는 이유는 서로 다른 패키지에서 같은 변수 이름을 사용하는 경우가 생길 수 있기 때문이다.

import {angular as ANGULAR} from 'App.js';
import {angular as ANGULAR2} from 'App2.js';