[React] 상품목록 Component 로 만들어 반복문 돌리기

💡 실습 포인트!

---

💜 상품목록 Component 로 만들어 데이터바인딩하기

// data.js 파일의 상품 데이터

export default [
    {
      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
    }
  ];

 

import Data from './data.js'; 

function App() {

  let [shoes, setShoes] = useState(Data);
  
  return (
    <div className="App">

      <div className="container">
        <div className="row">
          <Grid shoes={shoes[0]} />
          <Grid shoes={shoes[1]} />
          <Grid shoes={shoes[2]} />
        </div>
      </div>
      
    </div>
  );
}

function Grid(props) {
  return (
    <div className="col-md-4 grid">
      <img src={`https://codingapple1.github.io/shop/shoes${props.shoes.id + 1}.jpg`} />
      <h5>{props.shoes.title}</h5>
      <p>{props.shoes.content} & {props.shoes.price}</p>
    </div>
  )
}

• data.js 파일에서 Data 라는 변수로 받아온 상품 데이터는 shoes 라는 state 에 저장해주었다.
• 상품목록 한 개를 Grid 라는 Component 로 만들어서 기존에 상품목록 태그들이 있던 위치에 각각 넣어 총 3개의 Component 를 넣어주었다.
• Grid Component 는 위와 같이 코드를 작성했다.
  • 각 Grid Component 는 다른 상품 데이터를 받아와야 하므로 App Component 의 첫번째 Grid 는 shoes[0] 데이터를 shoes 라는 변수명으로,  두번째 Grid 는 shoes[1] 데이터를 shoes 라는 변수명으로.. 이런 식으로 Grid Component 로 전송해주었다.
  • 그러면 Grid Component 에서는 props 로 object 형태인 shoes 변수를 받아서 필요한 위치에 title, content, price 데이터가 바인딩되도록 해주었다.
  • 이미지를 데이터바인딩하는 게 조금 어려웠는데, 이미지 파일 이름이 shoes1.jpg, shoes2.jpg 이런식으로 각 인덱스에 1을 더한 숫자가 붙어있었다. 따라서 숫자만 수정해주면 되므로 백틱 기호를 사용하여 props.shoes.id +1 을 작성하여 해당 인덱스 + 1 한 숫자가 shoes 글자 뒤에 붙도록 해주었다.

 

 

---

💜 Component 반복문 돌리기

import Data from './data.js'; 

function App() {

  let [shoes, setShoes] = useState(Data);
  
  return (
    <div className="App">

      <div className="container">
        <div className="row">
          {
            shoes.map((item, idx)=>{
              return (
                <Grid shoes={shoes[idx]} key={idx}/>
              )
            })
          }
        </div>
      </div>
      
    </div>
  );
}

function Grid(props) {
  return (
    <div className="col-md-4 grid">
      <img src={`https://codingapple1.github.io/shop/shoes${props.shoes.id + 1}.jpg`} />
      <h5>{props.shoes.title}</h5>
      <p>{props.shoes.content} & {props.shoes.price}</p>
    </div>
  )
}

• shoes 라는 state 에 저장된 데이터의 요소 개수만큼 반복문을 돌려야 하므로 shoes 에 map() 함수를 붙여주었다.
• map() 함수 안에는 shoes 에 저장된 데이터 하나하나를 의미하는 item 이라는 파라미터와 반복문을 돌 때마다 증가하는 정수를 의미하는 idx 라는 파라미터를 넣어주었다.
• 그리고 Grid Component 안의 shoes 변수들은 shoes[0], shoes[1], 이런 식으로 인덱스가 필요하므로 숫자 대신 idx 파라미터 값이 들어갈 수 있도록 수정해주었다.
• 여기까지만 진행하면 React 프로젝트를 실행했을 때 개발자도구에서 key 값을 입력하지 않았다고 warning 이 뜨는데, key 값은 고유한 값이 필요하고 idx 가 충분히 그 역할을 해주므로 key={idx} 로 작성해주었다.