React - Card 컴포넌트 만들기 (다른방법)

• 선생님이 하신 코드가 더 짧고, 여러 방법을 알아보기 위해 해설강의를 들어봤다.
• 내가 완성한건 컴포넌트와 map 함수만 사용했고 실질적으로 컴포넌트를 사용하지 않았었다.

🖤 새로운 방법

• 컴포넌트 만들기

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

function Card(props){
  return(
    <>
    <Col>
    <img src={'https://codingapple1.github.io/shop/shoes'+ props.i + '.jpg'} width="80%"></img>
    <h4>{props.shoes.title}</h4>
    <p>{props.shoes.price}</p>
    </Col>
    </>
    )
}

• Card 라는 작명을 했고, <Col>을 같이 묶어서 컴포넌트로 만들었다.
• 지난번 피드에서 이미지에 대한 해결법을 수정했었다

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

• 문자 중간에 변수를 넣고 싶으면 {''} 먼저 묶은 후 '문자' + 변수 + '문자' 를 하면 된다.

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

• props 로 state를 가져올 때 shoes 전체가 아닌 shoes[i] 로 특정 object 만 가져와서 나타낸다.
• 1씩 증가하는 정수인 i 를 이용해 한 문장으로 축약해주었다.

---

어떠한 방법이든 프로그램을 완성만 하면 된다고 생각했는데 코드를 단축시키고 간단하게 하는 것이 얼마나 중요한 일인지 알게되는 시간이었다.