[React] export와 export default

변수나 함수들을 재사용하기 위해서 사용하는 게 바로 모듈입니다.

그렇다면 모듈은 어떻게 사용하는 걸까요?

 

모듈을 만드는 방식으로 export와 export default가 있습니다.

export는 다른 곳에서 재사용하기 위해 사용되는데 

export는 보통 변수/함수가 하나이상 일 때 사용하고 export default는 변수/함수가 하나 일 때 사용을 합니다.

 

export는 사용할 때 중괄호를 사용하여 export {변수1, 변수2} 작성하는데

사용할 때도 마찬가지로 import {변수1} from '경로'처럼 중괄호를 사용해야 합니다.

const hello :string = '안녕하세요';
export hello;

const myName = (name) : void => {
  console.log(`내이름은 ${name}`)
}
export myName;
// ----------------------------------------------------------
import {hello} from '경로';
import {myName} from '경로';

 

export default를 사용할 경우에는 export default 변수1;로 작성하고

사용할 때는 import 변수1 from '경로'로 사용하는 것을 알 수 있습니다.

const hello : string = '안녕하세요';
export default hello;

const myName = (name) :void => {
  console.log(`내이름은 ${name}`);
}
export default myName;
// -------------------------------------------------
import hello from '경로';
import myName from '경로';