React - 쇼핑몰 만들기(2)

구현하는 기능과 배우는 컨셉

✔ import / export
✔ data Html binding

👉export default 문법

(data.js 파일)

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

◾ src 폴더에 App.js와 나란히 data.js를 만듬
◾ data.js에서 중요한 변수를 export 하고싶을땐 export default라는 문법을 사용
◾ 우측에는 밖에서 사용하고싶은 변수를 담는다
◾ 이때, 변수명,함수명, 자료형 전부 담을 수 있다
◾ 파일마다 export default 라는 키워드는 하나만 사용가능

👉import 문법

import 사용할변수명(보통파일이름사용) from './data';
import { name1, name2 } from './data';

◾ App.js에서 data.js에서 빼낸 변수를 사용하고싶다면 import 변수명 from '경로'라고 작성
◾ export에서 내보낸 변수를 다 갖다 쓰고싶으면 저런식으로 사용하면된다.

👉export 문법

(data.js 파일)

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

◾ 여러개의 변수들을 내보내고싶으면 사용한다.
◾ 원하는 변수명, 함수명을 내보낼 수 있음
◾ 아까와는 다르게 꼭 변수나 함수명이 있어야함

👉쇼핑몰 데이터 모듈화

◾ App.js에서 state로 만들고싶지만 데이터가 너무 길어서 data.js파일로 보관한 후,
App.js로 가져온다
◾ 백엔드가 없으니 간단하게 데이터를 만들어보자

export default [
  {
    id: 0,
    title: '슈퍼스타',
    content: 'Born in France',
    price: `120,000`,
    img: 'https://image.adidas.co.kr/upload/prod/basic/source/EH0050-01-01.jpg',
  },

  {
    id: 1,
    title: '이지 부스트 350 V2',
    content: '인기',
    price: `289,000`,
    img: 'https://image.adidas.co.kr/upload/prod/basic/source/H02795-01-01.jpg',
  },

  {
    id: 2,
    title: '크리스티나이드',
    content: 'Born in the States',
    price: `130,000`,
    img: 'https://image.adidas.co.kr/upload/prod/basic/source/FV6956-01-01.jpg',
  },
];

👉상품데이터를 HTML에 데이터바인딩하기

◾ 방금 import 해온건 상품 3개의 데이터이다
◾ 각각 상품의 제목, 설명, 가격 이런 것들이 들어가있는데 이걸 알맞은 자리에 데이터바인딩 해보자.

(App.js 파일)

function App(){
  return (
    <div className="App">   
   <div className="container">
        <div className="row">
          <div className="col-md-4">
            <img src=" />
            <h4>{ shoes[0].title }</h4>
            <p>{ shoes[0].content } & { shoes[0].price }</p>
          </div>
          <div className="col-md-4">
            <img src="" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src=""  />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
        </div>
      </div>
    </div>
  )
}