[React] 코드 길어지면 import export

export default / import 문법

다른 파일에 보관되어 있는걸 가져올 때 import

export defalut 변수명; 이렇게 쓰면 원하는 변수 내보낼 수 있음.

(data.js 파일)

let a = 10;
export default a;

export 한 변수를 다른 파일에서 사용하고 싶다면

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

(App.js 파일)

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

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

* 파일마다 export default  라는 키워드는 하나만 사용가능 (export default a, b, c; 는 불가능)

* 파일경로는 ./ 부터 시작해야 함(현재경로라는 의미).

 

export { } / import { } 문법

여러개의 변수들을 내보내고 싶으면 export default 말고 이런 문법 사용.

원하는 변수, 함수 등 여러개 내보낼 수 있음.

(data.js 파일)

var a = 10;
var b = 20;
export { a, b }

export {} 로 내보낸 것은 import {}로 써야함.

(App.js 파일)

import { a, b } from './data.js';

* export {} 로 내보낸 것들은 import {} 쓸 때 자유작명이 불가능. export 했던 변수명 그대로 써야함.

 

---

출처: 코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!