7. import/export

in Library on React


  • 변수나 함수를 다른 파일에 저장해두고 불러와 사용할 수 있다
  • A.js에서 데이터를 내보니 B.js에서 사용하기
//A.js
var data = "test";
export default data;

//B.js
import data from './A,js';
  • export
    • 파일마다 export default 키워드는 한번만 사용 가능
    • 여러개의 변수를 내보내려면 export default 대신
      • export {data1, data2}
  • import
    • import 변수명 from ‘경로’
    • export{}로 내보낸 변수를 사용하려면
      • import {data1, data2} from ‘./A.js’;
      • export했던 변수명을 그대로 써야한다
      • 원하는 변수명만 써도 된다
//data.js
export default [
  {
    no : 1,
    title : "리액트 책 추천",
    name: "홍길동", 
    content : "리액트를 다루는 기술"
  },
  {
    no : 2,
    title : "java 책 추천",
    name: "김길동", 
    content : "자바의 정석"
  }
] 

//App.js
import React,{ useState} from 'react';
import Data from './data.js';

const App= () =>{
  let [memo, setMemo] = useState(Data);
  return (
    <div> 
      <div>
        <h2>{ memo[0].title }</h2>
        <p>{ memo[0].name }</p>
        <p>{ memo[0].content }</p>
      </div>
      <div>
        <h2>{ memo[1].title }</h2>
        <p>{ memo[1].name }</p>
        <p>{ memo[1].content }</p>
      </div>
    </div>
  )
};
export default App;