[React] 컴포넌트로 축약하기(props전송, 각각 다른내용넣기, map반복문)

1. props 작명

<Card **shoes={shoes}**></Card>

2. props 넣어서 컴포넌트 만들기

• shoes는 App에 있으니 App→ Card로 전송하면 될듯

function Card(**props**) {
  return (
    <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"/>
            <h4>{**props**.shoes[0].title}</h4>
            <p>{**props**.shoes[0].price}</p>
    </div>
  )
}

3. 컴포넌트 쓸 때마다 살짝 다른 내용 보여주고 싶으면 함수 파라미터 문법 사용하자 (props 잘 쓰십쇼)

function Card(props) {
  return (
    <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"/>
            <h5>**{props.shoes.title}**</h5>
            <p>**{props.shoes.price}**</p>
    </div>
  )
}

<Card shoes={shoes**[0]**}></Card>
<Card shoes={shoes**[1]**}></Card>
<Card shoes={shoes**[2]**}></Card>

→ shoes라는 state변수를 각각 shoes[0]. shoes[1], shoes[2] 로 저장을 해놨으므로 위의 Card에서 {props.shoes.title}, {props.shoes.price} 만 써도 됨! 인덱싱 안하고!!!

Q. 왜 상품사진 똑같음

→ 이미지는 똑같은 경로를 가지고 있기 때문에

Q. 그러면 각 상품번호에 따른 상품사진을 보여주려면?

1. 각 컴포넌트에 i값 각각 순서대로 추가

<Card shoes={shoes[0]} **i={1}**></Card>
<Card shoes={shoes[1]} **i={2}**></Card>
<Card shoes={shoes[2]} **i={3}**></Card>

1. 문자열 중간에 변수 넣는 js 문법 사용

{'문자열' **+ props.i +** '문자열'}

ex) props.i라는 변수를 넣는 문법을 사용했음

#아래 이 코드를
<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"/>

#이렇게 바꾸자
<img src={'https://codingapple1.github.io/shop/shoes' **+ props.i +** '.jpg'} width="80%"/>

• 문자열 사이에 변수 넣기

{'문자열' + 변수 + '문자열'}

→ 중괄호로 감싸고, +문법을 사용하자

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

map 반복문 이용

Q. shoes 갯수만큼 생성해주세요~

• 원래코드

<Card shoes={shoes[0]} i={1}></Card>
<Card shoes={shoes[1]} i={2}></Card>
<Card shoes={shoes[2]} i={3}></Card>

• map 반복문 이용

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

→ shoes state의 갯수만큼 반복

→ i는 0부터 1씩 증가하는 파라미터

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

→ shoes indexing은 0부터 시작하고, i는 원래 0부터 시작하는데, 1부터 시작해야 하기 때문에 props.i+1을 해줌

💥 ERROR 💥

우리가 지정한 i는 1,2,3 이 순서대로 증가하는데 파라미터 i 는 0부터 1씩 증가함.

ERROR 해결방법

1. 파라미터 i를 그냥 i로 놓고, 이미지 파일 주소에서 props.i+1을 해줌

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

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

1. 파라미터 i를 i+1로 미리 증가시키고, 이미지 파일 주소는 props.i를 해줌

{
          shoes.map((a,i)=>{
            return (
              <Card shoes={shoes[i]} **i={i+1}**></Card>
            )
          })
        }

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