React, 코드가 길어지면 import export

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 했던 변수명 그대로 적어야함)