상품의 쇼핑몰 데이터가 너무 길다. 근데 이걸 하나의 데이터에 다 넣어버리고 싶다 하면?
import, export 이용!
외부파일로 모듈화 가능

[
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },

  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000
  },

  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000
  }
] 

위 자료가 너무 길기 때문에 다로 파일을 만들고 export해서 App.js에서 import하도록 하겠습니다.

(data.js 파일)

var 중요데이터 = 'Kim';
export default 중요데이터;

• 파일마다 export default 라는 키워드는 하나만 사용해서 내보내자.
  import 할땐 import 변수명 from './data';
  변수명은 아무거나 쓰면 된다.

아래처럼 여러개를 내보내기가 가능하긴 하다.
(data.js 파일)

var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 }

다른 파일에서 import할 땐 export할 때 썼던 이름을 export default와는 다르게 그대로 써야함

(data.js 파일)

export default [
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },

  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000
  },

  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000
  }
] 

(App.js 파일)

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

function App(){
  
  let [shoes, shoes변경] = useState(Data);
  
  return (
    <div> HTML 많은 곳 </div>
  )
}

하면서 발생했던 에러 코드

Objects are not valid as a React child (found: object with keys {id, title, content, price}). If you meant to render a collection of children, use an array instead.

객체는 리액트의 자식요소로 적합하지 않다. id,title과 같이 값을 제대로 넣어라.
틀린 케이스 : {shoes[0]}
맞는 케이스 : {shoes[0].id}

*참고) jsx문법에서 js 코딩할때 중괄호 잊지말자

map을 쓸때, jsx안에서 js문법을 쓸때 중괄호좀 써

<div className="container">
        <div className="row">
          
          {shoes.map((shoe, i) => (
            <Card key={i} shoes={shoes} number={number[i]} />
          ))}
          {/* <Card shoes={shoes} number={number[0]} />
          <Card shoes={shoes} number={number[1]} />
          <Card shoes={shoes} number={number[2]} /> */}
        </div>
      </div>