[React] export, import

🐄 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했던 변수명과 일치시켜야 함