리액트 - export / import

[
  {
    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
  }
] 

서버에서 위와 같은 데이터를 가져왔다고 하자. 이를 데이터바인딩 하려면 state에 보관해야하는데 useState()안에 다 적기에는 너무 길다. 그럴땐 다른 js파일에 저장해놓고 import하면 된다.

//data.js

let data = [
  {
    id: 0,
    title: "White and Black",
    content: "Born in France",
    price: 120000,
    img: "https://codingapple1.github.io/shop/shoes1.jpg",
  },

  {
    id: 1,
    title: "Red Knit",
    content: "Born in Seoul",
    price: 110000,
    img: "https://codingapple1.github.io/shop/shoes2.jpg",
  },

  {
    id: 2,
    title: "Grey Yordan",
    content: "Born in the States",
    price: 130000,
    img: "https://codingapple1.github.io/shop/shoes3.jpg",
  },
];
export { data };

위처럼 'data.js'에서 data라는 변수에 object 데이터를 집어넣고 마지막에 export {데이터명}; 으로 export하면 된다. 이 때 한번에 여러 데이터를 export 할 수 있다. (함수도 export 가능하다.)

//App.js

import {data} from "./data.js"

--생략--

function App(){
  let [shoes] = useState(data);

export 후에 App.js에서 위와 같이 import 해주고 사용할 수 있다.

단 export할 때 사용한 데이터 이름과 import할 때 데이터 이름이 같아야한다.