210709

import, export: 다른 파일에서 데이터 불러오는 법

export default로 파일을 내보내고 import로 받아온다
import 변수명 from './data.js';

export default는 한 파일에 한 번씩만 사용가능!
-> 내보낼 변수가 너무 많다면?
export {변수1, 변수2}
import {변수1, 변수2} from './data.js'라고 써야 함.

/*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에서 Data라는 이름으로 data.js를 import 해옴

import Data from './data.js'; 

useState로 만들어주기

let [shoes, setShoes] = useState(Data);

import 해온 데이터로 상품명 데이터바인딩하기

+) 컴포넌트 만들고 반복문 돌리기

우선 컴포넌트를 만들고 props로 데이터를 받아온다.

function Card(props){
  return (
    <div className="col-md-4">
      <img src={ 'https://codingapple1.github.io/shop/shoes'+ (props.i+1)+'.jpg' } width="100%" />
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.content }</p> 
      <p>{ props.shoes.price }</p>
    </div>
  )
}

그리고 function App()안에서 map으로 반복문 돌려주기

      <div className="container">
        <div className="row">
          {
            shoes.map((a, i)=>{
              return <Card shoes={shoes[i]} i={i}/>
            })
            }
        </div>
      </div>

src 속성에다가 데이터바인딩하기

<img src={ 'https://codingapple1.github.io/shop/shoes'+ (props.i+1)+'.jpg' } width="100%" />

1. src 주소를 {중괄호}로 감싸준다.
2. map 내에서 순차적으로 반복되는 i를 변수로 받아와서 뒤에 붙여줌.
3. 이미지가 shoes1부터 시작하기 때문에 i+1부터 시작하게 해준다.

서버에서 사이트 구성에 필요한 데이터를 받아온 후 HTML에 뿌려야 하는 작업은 매우 중요하다.