[JavaScript-69] 모듈 import

import는 export한 요소들을 파일에 불러와 사용할 때 사용하는 키워드입니다. 

기본적인 문법은, 

------------------------------------

import { 변수나 함수 } from '파일경로';

------------------------------------

인데요, 예제 코드로 보여드릴게요.

//이 파일의 이름은 index.js라 가정

//(변수 선언부는 생략)
export { name, title };

 

자 이렇게, index.js파일에서 name과 title을 내보냈는데,

이제 제가 저걸 사용해볼게요

import { name, title } from './index.js';

이제 이해가 잘 가시죠?

import { name as userName, title } from './index.js';

이렇게, as키워드를 사용해 다른 이름으로 불러올 수도 있습니다.

 

하나만 더 연습!

export default되었던 요소를 불러오는 연습을 해봅시다.

//이 파일의 이름은 index.js라 가정

//(변수 선언부는 생략)
export default { name, title };

import objectA from './index.js';

console.log(objecA.title);
console.log(objecA.name);

default로 내보낸 요소는 객체기 때문에, import { title, name} from ~ 으로 사용할 수 없다는 점!

잘 기억해주세요!

objectA는, 제가 내보낸 {name: name, title: title} 객체의 이름입니다!

import를 하며 정해줬네요.