매일매일 정신없이 지나가는 하루가 반복된다.
새로이 배우는 내용이 쏟아지니 정말 어질어질하다.
import / export
자바스크립트 코드가 길어져 다른 파일로 쪼개고 연결할 때 사용한다.
내가 원하는 변수, 함수, class만 다른 파일로 보낼 수 있다.
import한 변수, 함수는 사용만 가능하고 수정이 불가능하다.
import a from "library.js";
console.log(a);JS파일에는 특정 변수를 다른 파일에서 이용할 수 있게 내보내고 싶을 때 export default 변수명 하면 된다.
그 변수를 가져다 쓰고 싶을 때 다른 파일에서 import blabla from "경로"를 해준면 된다.
(blabla라 되어있는 변수명은 아무렇게나 작성 가능하다.)
여러개의 export도 가능하다.
JS파일에서 변수를 여러개 만들고 내보내고 싶을 때 export 키워드를 여러번 사용하면 된다.
(library.js)
let a = 10;
let b = 20;
export {a, b};
--------------------
(main.js)
import {a, b} from "library.js";
console.log(a);export라 쓸 때는 export{변수명1, 변수명2} 이런식으로 담아줘야한다.
export let a = 10; 이런식으로 써도 된다.
export 키워드로 내보낸 것들을 import할 땐 import{변수명1, 변수명2} from "경로"이렇게 가져와야한다.
export와 export default 차이
export default는 한번만 사용가능하고 import시 변수명을 새로 작명할 수 있다.
export는 {}로 담아줘야하고 import시도 정확히 변수명을 써줘야한다.
나는 그냥 export 쓸 듯,,,?
(library.js)
let a = 10;
let b = 20;
let c = 30;
export {a, b};
export default c;
--------------------
(main.js)
import c, {a, b} from "library.js";
console.log(c);위 방식으로 export와 export default 둘 다 동시 사용이 가능하다.
(library.js)
let a = 10;
let b = 20;
let c = 30;
export {a, b};
export default c;
--------------------
(main.js)
import c, {a as 새이름} from "library.js";
console.log(새이름);위방식으로 a 변수명을 새이름으로 변경도 가능하다.
(library.js)
let a = 10;
let b = 20;
let c = 30;
export {a, b};
export default c;
--------------------
(main.js)
import c, * as 새이름 from "library.js";
console.log(새이름.a);import할 변수가 너무 많으면 *기호 하나로 object에 담아 모두 import 해올 수 있다.
