프론트엔드/React(코딩애플)
React, 코드가 길어지면 import export
Hyeon_E
2023. 2. 19. 22:57
export default, import 문법
//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 라는 키워드는 하나만 사용가능
- 파일경로는 ./ 부터 시작(현재경로라는 뜻)
//data.js 파일
let a = 10;
let b = 20;
export { a, b }
여러개의 변수나 함수 등을 내보내고 싶으면 export { 변수1, 변수2 , ...}
//App.js 파일
import { a, b } from './data.js';
export { }로 내보냈으면 가져다가 쓸 때 import { } from ./파일경로 를 씀
- 중요한 점
- export { }로 내보냈다면 import { } 쓸 때 자유작명이 불가능 함(export 했던 변수명 그대로 적어야함)