[React_study] import & export

* export default / import 문법

• DB들을 state로 만들고 싶은데 useState()안에 넣기에는 너무 길이가 긴 경우
• 다른파일에 보관하였다가 import해올 수 있다.

* export default / import 예시 코드

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

- export 했던 변수를 다른 파일에서 사용하고 싶으면 import 작명 from './파일경로'로 작성하면 된다.

 

(유의점)

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

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

- 파일경로는 ./ 부터 시작해야한다. 현재경로라는 뜻

// data.js 파일

const number = 10;

export default number;

// App.js파일

import number from './data.js';

console.log(number) // 10

 

* export { } / import { } 문법

- 여러개의 변수들을 내보내고싶으면 export default 말고 export문법을 사용하면 된다.

- 그럼 원하는 변수, 함수 등을 여러개 내보낼 수 있습니다.

- export {} 이걸로 내보냈으면 가져다가 사용할 때는  import {} 문법을 사용하면 된다.

 

(유의점)

- export { } 했던 것들은 import { } 쓸 때 자유롭게 작명이 불가능함

- export 했던 변수명 그대로 적어야함

- 작명을 변경하려면 as를 이용해야한다.

  ex) import { name1 as firstName} from './data.js';

// data.js 파일

const name1 = 'Poodle';
const name2 = 'Latte';

export { name1, name2 }

// App.js 파일

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

 

(결론적으로)

export default / import 쓰거나

export { } / import { } 쓰거나 둘 중 마음에드는걸 사용