export default / import 문법
데이터를 다른 파일에 보관해 뒀다가 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 './파일경로'
위 코드에선 a 출력해 보면 10이 나온다.
(유의할 점)
- 변수, 함수, 자료형 전부 export 가능.
- 파일마다 export default라는 키워드는 하나만 사용 가능.
- 파일 경로는 ./부터 시작해야 함. 현재 경라는 뜻.
export { }/ import { } 문법
여러개의 변수나 함수 등을 내보내고 싶으면 export { 변수1, 변수2, ... } 를 사용한다,
export { }로 내보냈으면 import { 변수1, 변수2, ... } from './파일경로' 를 사용한다.
(data.js)
let a = 10;
let b = 100;
export { a, b }(App.js)
import { a, b ] from './data.js'
console.log(a);
console.log(b);
(유의할 점)
- export { } 했던 변수명 그대로 import { } 사용할 때 작성해야 함.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
