Javascript - 모듈 사용하기 (export, import)

Javascript

자바스크립트 기초를 다지자

 

코드들을 보다보면 export, import로 막 데이터를 주거니 받거니하는데

뭐 대강 데이터를 보내고 받는구나~ 라는건 알고있었지만

자세히는 몰랐음

자세히 봐보자

 

🐷 export로 내보내고 import로 받는다

export로 데이터 보내기

const greet = "Hello~";
const sumNum = (num1, num2) => num1 + num2;
export {greet, sumNum};

 

외부와 공유할 변수를 만들고 export{ }에 담아서 보내기

 

export const greet2 = "이렇게도 보낼 수 있따";
export const sumNum2 = (num1, num2) => num1 + num2;

근데 이걸 더 짧게 이렇게도 보낼 수 있다

 

import로 데이터 받기

import {greet} from './library1.js';
import {sumNum} from './library1.js'

 

이렇게 하나씩 받아도 되지만 ...

import {greet, sumNum} from './library1.js';

 

여러개를 받아올땐 이렇게 받아올 수 있다

 

console.log(`갖고온거 : ${greet}`);
console.log(sumNum(6, 10));

갖고온 데이터는 그냥 바로 이렇게 사용할 수 있다.

 

🐷 이번엔 객체와 배열을 보내보자

// 객체
const hero1 = {
  name : "언제나초보",
  device : "목검",
  level : 1
}

// 배열
const hero2 = ["아이언맨", "돈", 38];

export {hero1};
export {hero2};

 

객체와 배열을 같이 보냈다.

import {hero1, hero2} from './library2.js';

 

필요한 데이터들을 가져왔다.

console.log(hero1.name); // 언제나초보 - 객체의 name을 잘 가져옴
console.log(hero2[0]); // 아이언맨 - 배열의 0번째를 잘 가져옴

 

가져온 데이터들을 사용했다.

 

근데 어짜피 객체든 배열이든 다 가져왔는데, 더 쉽게 가져올 수 없을까?
모든 식별자를 가져올땐 이렇게 가져오자

 

import * as everyThing from './library2.js';

 

everyThing에 다 있음

 

단, 모든 식별자를 가져왔을때는 이렇게 사용하자

console.log(everyThing.hero1.device); // 목검
console.log(everyThing.hero2[1]); // 돈

 

 

🐷 Default 모듈화

const sumNum3 = (num1, num2) => num1 + num2;
const sumNum4 = (num1, num2) => num1 + num2;

 

기본 모듈화하여 보내보자

// 1. 직접 하나의 메모리만 보내는 경우
export default sumNum3;
//export default sumNum4;

 

Default로 외부로 보낼때는 하나만 가능하다.
하나의 메모리만 보낼때는 그냥 이렇게 보낸다.

import sumNum3 from './library3.js';

 

그리고 받을때도 그냥 해당 데이터를 받아오면된다.

console.log(sumNum3(3,5)); // 8

 

가져온건 바로 사용 가능!

 

 

하지만 default로 여러개를 보내고 싶을때는 이렇게 하자

export default {sumNum3, sumNum4};

 

이렇게 복수의 메모리를 보낼 수 있다.

import result3 from './library3.js';

 

단, 받을때는 꼭 이름을 통일하지 않고 묶어서 받자

위 코드는 sumNum3와 sumNum4를 result3에 묶어서 받은 것!

 

console.log(result3.sumNum3(2,3)); // 5
console.log(result3.sumNum4(2,3)); // 5

 

여러개의 데이터를 가져왔으면 아까 everyThing처럼 활용하면 된다.

 

끝