Card 컴포넌트 만들고 props, map

html  긴 부분 컴포넌트 만들기

function App(){
  return (
    <div className="App">
      (생략)
      <div className="container">
        <div className="row">
          <Card/>
          <Card/>
          <Card/>
        </div>
      </div>
    </div>
  )
}

function Card(){
  return (
    <div className="col-md-4">
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
      <h4>상품명</h4>
      <p>상품정보</p>
    </div>
  )
}

• Card 라는 컴포넌트를 만들고 축약할 html을 담는다.

원래 App 컴포넌트에 있던 데이터들을 Card 컴포넌트로 데려오기

(function App 내부)

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

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>
  )
}

• shoes라는 state는 App 컴포넌트에 있었다.
• 그걸 App의 자식인 Card 컴포넌트가 쓰고 싶으면 App->Card 이렇게 props 전송해줘야된다.
• props.보낸거 쓰며 자식 컴포넌트에서 부모 컴포넌트의 state 값을 쓸 수 있다.
• 하지만 이렇게 작성하면 같은 데이터들만 보여질 것이다.

Card 컴포넌트에서 보여질 다른 데이터들 보내주기

(function App 내부)

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

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

• props를 활용하면 매번 다른 내용의 모달창을 만들 수 있다.
• <Card> 쓸 때마다 각각 다른 정보를 props로 보내면 된다.
• props에 각각 다른 데이터들을 보내 다른 상품 데이터들을 볼 수 있게 한다.
• { 상품0 정보 } 이런 object 자료를 props로 보냈기 때문에 데이터 바인딩하는 문법도 좀 달라진다.
  • shoes. -> 이렇게만 작성하여 각각 다른 내용의 Card를 보여줄 수 있다.
• 하지만 이렇게 작성하면 다 같은 상품 사진이 보일 것이다.

(function App 내부)

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

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

• props로 숫자를 보내어 다른 사진을 보여주게 할 수 있다.
• props.i 라고 출력하면 보냈던 0,1,2 이렇게 보냈던 숫자가 나온다.
• 이걸 shoes0.jpg 자리에 집어넣는다.
• 중간에 변수 넣고 싶다면 '문자' + '변수' + '문자' 이렇게 쓰면 됨.
  • => javascript 문법

map 반복문

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

• map 반복문 안에 function 함수를 넣어도 되고 위처럼 화살표 함수를 사용해도 된다.
• 2개의 파라미터를 사용 가능하기 때문에 a,i라는 파라미터를 사용해준다.
• shoes의 데이터 수만큼 반복하기 위해 shoes.map 사용
• i 파라미터를 사용하여 0부터 사용하도록 작성해준다.