[React] import/export

 

App.js

// eslint-disable-next-line
import React, { useState } from 'react';
import './App.css';
import datas from './data.js';

function App() {

  let [data, dataChange] = useState(datas);
  
  return (
    <div className="App">
      <h1> { data[0].no } {data[0].name }</h1>
    </div>
  );
}


export default App;

 

 

data.js

export default [

    {
        no : 0,
        name : "number0"
    },

    {
        no : 1,
        name : "number1"
    },

    {
        no : 2,
        name : "number2"
    }
]

 

• data.js의 파일내용을 App.js에서 사용하고 싶을 때
  • data.js에서 디폴트로 export한 데이터를 App.js에서 가져오면 된다.

 

 

• export시 
  • 'export'는 한번만 사용가능하다
  • export default 변수명
  • export {변수명1, 변수명2}
  • export default [ { key1 : value1 }, { key2 : value2 } ]
• import시
  • import 변수명 from '주소';
  • 변수명을 쓸때는 default가 없이 사용하면 새로 생성불가 export {변1, 변2} 로 썼으면 import {변1, 변2} from...으로 써야함