[Level up] 데이터 실습(1) - 가져오기 & 내보내기

01.가져오기 & 내보내기

• js로 확장자로 끝나는 JavaScript 파일에서는 외부에 있는 JavaScript 파일을 가져오기(import)를 할 수 있으며 또한 그 파일을 내보내기(export)를 할 수 있습니다.

02.가져오기

• import라는 키워드를 통해 외부에 있는 JavaScript 파일을 가져올 수 있는 통로를 열어준다고 생각하면 됩니다.

• import 코드 예시

import random from "./getRandom"; // getRandom.js
import {random, user as heropy } from "./getRandom"; // getRandom.js
console.log(random());

03.내보내기

• export 키워드를 통해 내부에 있는 내용을 내보낼 수 있습니다.
• 이를 통해 두 가지 통로를 가지는데 이것이 Default export와 Named export입니다.

3-1.Default export

• 데이터의 이름을 별도로 지정하지 않아도 되는 기본 통로
• 기본 통로의 경우, 하나의 모듈에서 하나의 기본 내보내기만 가능합니다.

3-2.Named export

• 데이터의 이름을 반드시 지정해야 하는 통로
• 이름을 지정한 통로는 여러 개의 데이터를 함께 내보내기를 할 수 있습니다.

04.가져오기 & 내보내기 코드 예시

• Default export 코드 예시

export default function () {
	return Math.floor(Math.random() * 10);
}

import random from "./getRandom"; // getRandom.js
console.log(random());

• 기본 통로로 데이터가 빠져나갈 수 있는 구조를 가집니다.
• 기본 통로의 경우 하나의 파일에서 하나의 데이테만 내보 낼 수 있습니다.
• 기본 통로로 빠져나가는 데이터는 별도로 이름을 지정할 필요가 없기 때문에 export default 키워드를 사용합니다.

• Named export 코드 예시

export default function random () {
	return Math.floor(Math.random() * 10);
}
export const user = {
	name: "HEROPY",
	age: 85
}

import {random, user as heropy } from "./getRandom"; // getRandom.js
// Named export를 사용하는 경우 { random, user } 처럼 사용할 이름에 { } 표시를 해줘야 한다. 
// as뒤에는 내가 바꾸고 싶은 이름을 적는다.

• 이름을 지정한 통로로 나오는 데이터의 경우 import {random, user as heropy }처럼 데이터를 중괄호{ }로 묶어서 사용해야 합니다.
• 또한, 위에 코드처럼 여러 데이터를 함께 내보내기가 가능합니다.
• 지정한 이름을 현재 파일에서는 다르게 사용하고 싶다면 user as heropy와 같이 as를 사용합니다.

import * as R from ""./getRandom""; // 와일드카드(*)로 내보내기 되는 여러 내용들을 한꺼번에 사용한다.
console.log(random());
console.log(user);
console.log(R);

• *을 와일드 카드(Wildcard Character)라고도 하며 이는 여러 내용을 한꺼번에 지정할 목적으로 사용하는 기호를 가리킵니다.
• 이름을 지정한 통로로 나오는 데이터를 한꺼번에 가져오고 싶다면 위 코드처럼 와일드 카드를 활용하면 됩니다.