React
[React] export, import
코릴라입니다
2023. 11. 26. 23:07
🐄 export, import를 통한 파일 관리
1. export default / import [export default]
- 한 개의 변수를 export 할 때 사용
// data.js 파일 (export할 데이터를 따로 저장한 파일)
let productsData=
[
{
id: 0,
title: "상품 이름1",
content: "상품 설명1",
price: 120000
},
{
id: 1,
title: "상품 이름2",
content: "상품 설명2",
price: 110000
},
{
id: 2,
title: "상품 이름3",
content: "상품 설명3",
price: 130000
}
];
export default productsData;
// App.js 파일 (export한 변수를 import할 파일)
import productsData from './data.js';
let [products, setProducts] = useState(productsData)
- export default 변수명;
- import 변수명 from 경로;
- default export의 경우, import 할 파일에서 변수명을 달리하여 import가 가능하다.
=> export할 때, productsData라는 이름으로 export 했어도 import newName from './data.js'; 처럼 새로이 작명하여 import 하는 것이 가능
2. export { } / import { } [named export]
- 여러 개의 변수를 export 할 때 사용
// data.js 파일 (export할 데이터를 따로 저장한 파일)
let a = 'varA';
let b = 'varB';
export {a, b};
// App.js 파일 (export한 변수를 import할 파일)
import { a, b } from './data.js';
- export { }를 사용해 내보낸 변수는 import시 자유작명이 불가능하여 export했던 변수명과 일치시켜야 함
반응형