[React] import export 사용하기 (feat. export default 사용 )

Export 하기

모듈을 export하는 방법은 어렵지 않다. export하길 원하는 함수나 변수 앞에 export를 붙여주면 된다.

 

export const countries = ["한국", "일본", "중국"];

export const midtermTest = () => console.log("Oh My God");

export function helloWorld() {

console.log("helloWorld");

}

//이 코드는 Test.js 파일에 적혀져 있다고 하자

 

 

변수와 함수에 하나씩 export를 붙여주는게 귀찮다면 다음과 같이 한번에 export 해줄 수 있다.

 

const countries = ["한국", "일본", "중국"];

const midtermTest = () => console.log("Oh My God");

function helloWorld() {

console.log("helloWorld");

}

export { countries, midtermTest, helloWorld };

 

위의 두개의 코드는 모두 같은 동작을 하게된다.

 

export default

export 방법 중에는 default 문법이 있다. 이는 해당 모듈(현재 파일)에서 함수나 변수를 기본으로 내보내겠다는 뜻이다.

export default const countries = ["한국", "일본", "중국"];


import countries from "./Test";

 

 

위와 같이 default로 내보내기를 하게 되면 import할 때 {} 없이 import가 가능합니다.또한 아무 이름으로나 import 가능하다. 한개의 파일에서 export default 되는것은 하나이기 때문에.

 

 

---

Import 하기

위의 코드에서 변수와 함수를 가져와 보도록 하겠다.

 

import { countries, helloWorld, midtermTest } from "./Test.js";

 

필요로 하는 함수와 변수를 import {} 중괄호 안에 넣어 주면 된다. 그리고 from 뒤에는 실제 파일이 존재하는 경로를 입력해 준다. (여기서는 export한 파일 Test가 import하려는 파일의 위치와 같은 폴더에 있다는 뜻이다) 또한 아래와 같이 파일 확장자(.js, .css 등)은 제거하여도 문제 없이 동작한다.

import { countries, helloWorld, midtermTest } from "./Test";

 

다른 파일로부터 가져온 함수나 변수의 이름을 바꾸서 사용하고 싶다면 as를 이용해 이름을 바꿔 사용한다.

import { countries as eastAsia, midtermTest, helloWorld } from "./Test";

console.log(eastAsia);

출력 : '한국' '일본' '중국'

 

다음과 같이 모두 import 하기위해서 *를 사용할 수 있다. 

import * as JS from './Test'
// 이렇게 import를 하게되면 JS.countries와 같이 .을 붙여 사용해야한다.