React Component만들기 map반복문

아래와 같은 반복되는 div를 component로 만드는 과정

          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"/>
            <h4> {shoes[0].title} </h4>
            <p> {shoes[0].price} </p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%"/>
            <h4> {shoes[1].title} </h4>
            <p> {shoes[1].price} </p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%"/>
            <h4> {shoes[2].title} </h4>
            <p> {shoes[2].price} </p>
          </div>

// 참고로 위에 shoe변수는 아래와 같이 state로 만들어져있고, data는 json 형태
  let [shoes] = useState(data)
  
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
    }
  ]

위와같은 화면이 구현된다.

1. 먼저 Card라는 function을 만들고

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

2. Card를 아래와 같은 형태 (component)로 HTML이 있던 자리에 집어넣는다.

 <Card/>

하지만!!

Card 안에 있는 shoes 변수는 다른 함수에서 설정된 state이기 때문에, Card에서 사용을 할 수가 없다.

--> props를 통해서 자식으로 전송 (기존 함수에서 Card함수로 전송해보자)

 

// 아래와 같이 component에 shoes라고 작명하고 {  } 안에 state변수를 집어 넣음
// 참고로 작명은 일반적으로 변수 이름이랑 동일하게 지어줌 
<Card shoes = {shoes} />


// Card함수 parameter에 props라는 이름으로 전송, 그리고 props.shoes[0] 방식으로 사용
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>
  )
}

하지만 위에 코드에서 볼 수 있듯이, <img> tag에 shoes1 이 하드 코딩되어있고,

<h4> <p> tag에도 shoes [0]처럼 하드코딩이 되어있다.

 

해결방법

//1.먼저 <Card> component에 있는 변수를 살짝 바꿔주자

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

//shoes 변수는 array로 3개의 json 데이터를 가지고 있는데,
//위와같이 shoes[0] 은 첫번째 json데이터를 나타낸다.

// 그렇게 되면 아래 function에서 props.shoes[0] 에서 props.shoes 로 바뀜 (value는 동일)
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>
  )
}

하지만 여전히 img는 사진 1번만 나오게 하드코딩되어있다.

아래와 같이 변경

// Card component에 props를 하나더 생성해준다.
<Card shoes={shoes[0]} i = {1} />

//그리고 아래와 같이 props.i 로 해당 숫자를 전송해준다.
<img src={"https://codingapple1.github.io/shop/shoes" + props.i +".jpg"} width="80%"/>

구현은 다 되었는데, 아래처럼 3개의 컴포넌트가 반복되고 있다.

이걸 map을 이용해서 간단하게 변경해보자.

 

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

수정된 코드

// map 앞에 shoes는 shoes의 개수(array 길이) 만큼 반복된다.


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

출처 : 코딩애플 "React 리액트 기초부터 쇼핑몰 프로젝트까지!"