코드 길어지면 import export

대충 서버에서 보낸 것이라고 생각하고 상품 데이터를 html에 보여주고 싶은데

코드가 너무 길어요 응애

이럴때 import export 쓰는거임

다른 js파일에 보관하고 쓰고 싶을때 쏘옥 꺼내보자

export default / import 문법

예를 들어서 data.js라는 파일이 있는데 거기 있던 변수를 App.js 에서 가져와서 쓰고 싶으면

(data.js 파일)

let a = 10;
export default a;

export default 변수명; 이렇게 쓰면 원하는 변수를 밖으로 보낼 수 있음

(App.js 파일)

import a from './data.js';
console.log(a)

export 했던 변수를 다른 파일에서 쓰고싶으면

import 내맘대로작명 from './파일경로' 하면됨

그리고 원하는곳에 (내맘대로작명) 이거 갖다 쓰면되는거고

유의점

변수, 함수, 자료형 전부 export 가능

파일마다 export default 라는 키워드는 하나만 사용가능

파일경로는 ./ 부터 시작해야함. 현재경로라는 뜻임

---

export { } / import { } 문법

여러개의 변수들을 내보내고싶으면 export default 말고 이거 쓰면됨

(data.js 파일)

var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 }

export{} 하면 원하는 변수,함수등 여러개 내보내기 가능

(App.js 파일)

import { name1, name2 } from './data.js';

export{} 쓰면 가져다쓸때 import{} 해야됨

유의점

export { } 했던 것들은 import { } 쓸 때 자유작명이 불가능. export 했던 변수명 그대로 적어야함