Card 컴포넌트 map 활용하기

데이터.json

let data = [
    {
    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 default data;

일단 세개만 화면에 보이도록 하자.

import data from './data'
let [shoes,setShoes]= useState(data)
//shoes에 위 세개의 상품의 데이터가 있음.[{},{},{}]


<Card shoes={shoes[0]}/>
<Card shoes={shoes[1]}/>
<Card shoes={shoes[2]}/>
이렇게되야함 

{shoes.map((el,i) => (
            <Card  shoes={shoes[i]} />
          ))}

📌 카드 컴포넌트!
 function Card (props){
  return(
    <div>
     <img src={`https://codapple.github.io/shoes${props.shoes.id+1}.jpg`}/>
     <h4>{props.shoes.title}</h4>
     <p>{props.shoes.price}</p>
  </div>
  )
}

axios / Card 더 추가

버튼을 누르면

---

이미지 public 폴더

이미지같은 static 파일의 경우 public 폴더에 보관해도 됩니다.

리액트로 개발을 끝내면 build 작업이라는걸 하는데
지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다.
src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다.
그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데
이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없습니다.

public 폴더에 있는 이미지 사용할 땐

그냥 슬래쉬만 붙이면 됩니다.
<img src="/logo192.png" />

권장
<img src={process.env.PUBLIC_URL + '/logo192.png'} />

codingapple.com 경로에 배포하면 아무런 문제가 없지만
```codingapple.com/어쩌구/ 경로```에 배포하면
/logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올 수도 있습니다. 
그래서 /어쩌구/ 를 뜻하는 process.env.PUBLIC_URL 이것도 더해주면 된다고 하는군요. 
codingapple.com/어쩌구/ 경로에 리액트로 만든 페이지를 배포할 일이 
아예 없으면 굳이 안해도 됩니다.