[React]- export, import

리액트에서 코드가 너무 길어져서 코드 분할이 필요하거나 모듈화가 필요할 때는 따로 파일을 생성하여 import, export 해주면 된다.

export, import 하는 법

예를 들어 App.js와 같은 경로에 data.js라는 파일을 생성하여 이 파일 안의 내용을 App.js로 넘겨주는 상황이라고 했을 때, 우리는 하나의 변수만을 export 할 수 있다. data.js에서 export한 변수를 App.js에서 import하여 사용할 수 있게 된다.

/* data.js */
let a = 10;
export default a;

/* App.js */
import a from './data.js'

만약 여러개의 변수를 export 하고 싶으면 아래와 같이 하면 된다. (default는 붙이지 않음)

/* data.js */
var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 }

/* App.js */
import { name1, name2 } from './data.js';

❗️ 변수, 함수, 자료형 모두 export가 가능하다.
❗️ 파일마다 export default라는 키워드는 한 번만 사용 가능하다.
❗️ export 했던 변수명 그대로 import 해야 한다.

응용

지난 시간에는 상품의 이름과 가격을 배열에 저장하여 map 반복문을 통해 출력했었다면, 이번에는 data.js 파일에 상품 정보를 저장해서 export하여 사용해보도록 하겠다.

/* data.js */
let data = [
    {
      id : 0,
      title : "strawberry tart",
      content : "Born in France",
      price : 20000
    },
  
    {
      id : 1,
      title : "mini pies",
      content : "Born in Seoul",
      price : 15000
    },
  
    {
      id : 2,
      title : "Creme Brulee",
      content : "Born in the States",
      price : 10000
    }
  ] 

export default data;

/* App.js */
import logo from './logo.svg';
import './App.css';
import React, {useState} from 'react';
import Navbar from './Navbar';
import data from './data.js'


function App() {

  const mainImagePath = process.env.PUBLIC_URL + '/img/dessert1.jpg'
  // const [title, setTitle] = useState(['딸기 타르트', '미니 파이', '크림 브륄레']);
  
  let [desserts] = useState(data)

   return (
    <div>
      <Navbar />
      <a href='#Home'>
        <div className='mainImage' >
          <img src={mainImagePath} alt='main-image' />
        </div>
      </a>
      {/* <Product title={title}></Product> */}
      <Product desserts={desserts}></Product>

    </div>
  );
}


function Product(props) {
  const productImages = [
    process.env.PUBLIC_URL + '/img/col1.jpg',
    process.env.PUBLIC_URL + '/img/col2.jpg',
    process.env.PUBLIC_URL + '/img/col3.jpg',
  ]

  // let price = ['20,000', '15,000', '10,000'];

  return (
    <div className='container'>

      {props.desserts.map((desserts, i) => (
        <div key={i}>
          <img src={productImages[i]} alt='상품 이미지' />
          {/* <h3>{title}</h3>
          <h4>{price[i]}</h4> */}
          <h3>{props.desserts[i].title}</h3>
          <h4>{props.desserts[i].content}</h4>
          <h4>{props.desserts[i].price}</h4>
        </div>
      ))}

    </div>
  )
}

export default App;

완성!