export/import

리액트를 import하는 코드를 보다보면 아래와 같이 나뉘어진다.

1
2
3

import React from 'react';

import * as React from 'react'

두가지의 성능상 차이점은 있는지 궁금했었다.
첫번째 코드는 default로 React를 가져오는 거고 두 번째 코드는 모든 export된 요소들을 한번에 가져온다는 의미이다.

그 전에 모듈 시스템에 대해서 알아보도록 하자.

과거 자바스크립트

자바스크립트는 패키지와 파일끼리 서로 의존하고 있는 경우가 있다.
예를 들어 A파일에서는 jquery를 사용하고 B파일에서는 kakaoAPI를 사용하고 있는 경우
원칙적으로 A파일에서는 kakaoAPI에 접근할 수 없어야하지만 웹에서 처음 시작할 때
모든 스크립트를 로딩하기 때문에 다른 파일도 모든 패키지에 접근할 수 있었다.

A파일

1

$ = null;

B파일

1
2
3
4

// error
$('a').on('click', function () {

});

이렇게 스크립트에 삽입하여 문제가 발생할 수 있다.

이러한 문제점을 해결하기 위해 나온것들이 commonJS, requireJS 이다.
의존성을 관리하기 위해 파일 첫부분에 어떤 패키지를 필요로 한다고 선언하여 선언한 패키지만 사용한다.

1

import React from 'react';

import, export 방식

1
2
3
4
5

const a = 1;
const b = 2;
export { a };
export const c = 3;
export default b;

• a는 변수 선언 후 객체에 담아서 export
• b는 변수 선언 후 default라는 키워드를 붙인채 export
• c는 변수 선언과 동시에 export

1

import d, { a, c as e} from 'A';

default로 export한 b는 괄호를 사용하지 않아도 import가 가능하며 변수명을 마음대로 지을 수 있다.
여기서는 변수 d가 변수 b를 import한 것이다.
a와 c는 export할 때 이름 그대로 하며 괄호를 사용해서 불러와야한다.
하지만 괄호안에 변수 이름은 바꾸고 싶다면 as라는 키워드를 사용한다.

1

import * as React from 'react';

위에 코드는 *을 사용하여 export한 모든 것들을 다 모아서 import해주는 것이다.
default도 객체의 멤버로 들어간다.

typescript??

Typescript를 사용할 때에 default로 export한 객체를 가져올 때는 tsconfig.json파일에
"allowSyntheticDefaultImports": true 값을 설정해줘야한다.
react를 임포트를 할때에는 * as React를 쓰는것이 올바른 방법이다.

1

import React, { PureComponent } from 'react';

이 코드는 React가 export default로 되어 있을 때 가능한 방식이다.
버전에 따라서 수정될 수 도 있기 때문에 * as React를 사용하는 추세인 것 같다.