[react] 쇼핑몰 project - 3 : 반복되는 코드 컴포넌트로 구분 & 반복문 map 사용

반복되는 코드는 다른 컴포넌트로 구분

이렇게 usestate 상태 변수의 값(배열)을 그대로 전달한다면? 다른 신발에 같은 제목과 내용이 출력되는 문제를 볼 수 있다. (같은 코드를 반복하지 않을경우)
여기서 생기는 문제해결은 아래에 적혀있다.

(props) 로 전달하면? props.shoesData.title 이런방식
바로 변수를 {} 안에 전달하면 변수명 그대로 사용할 수 있다.

import Data from "./data.js";

function App() {
  let [shoesData, setShoesData] = useState(Data);

  return (
    <>
      <div className="App">
     ......
        <div className="product-container">
          <div className="row">
            <ShoesProducts shoesData={shoesData}></ShoesProducts>
            <ShoesProducts shoesData={shoesData}></ShoesProducts>
            <ShoesProducts shoesData={shoesData}></ShoesProducts>
          </div>
        </div>
      </div>
    </>
  );
}
export default App;
// (props) 로 전달하면? props.shoesData.title 이런방식
// 바로 변수를 {} 안에 전달하면 변수명 그대로 사용할 수 있다.
function ShoesProducts({ shoesData }) {
  return (
    <>
      <div className="col-md-4">
        <img src="https://codingapple1.github.io/shop/shoes1.jpg"></img>
        <h3>{shoesData[0].title}</h3>
        <p>{shoesData[0].content}</p>
        <p>{shoesData[0].price}</p>
      </div>
    </>
  );
}

각 다른 데이터 보내기

처음부터 상태변수를 props 로 전달할때 배열의 0번째, 1번째, 2번째 요소를 전달할 수 있다.
신발 마다 다른 데이터가 바인딩된 것을 볼 수 있다.

하지만 아직 반복되는 비슷한 코드가 존재하고, 사진은 변하지않았다! 이 부분은 img를 구분한 1,2,3 숫자를 바꿔주는 변수를 사용하면 되지않을까?

<div className="product-container">
          <div className="row">
            <ShoesProducts shoesData={shoesData[0]}></ShoesProducts>
            <ShoesProducts shoesData={shoesData[1]}></ShoesProducts>
            <ShoesProducts shoesData={shoesData[2]}></ShoesProducts>
          </div>
        </div>

function ShoesProducts({ shoesData }) {
  return (
    <>
      <div className="col-md-4">
        <img src="https://codingapple1.github.io/shop/shoes1.jpg"></img>
        <h3>{shoesData.title}</h3>
        <p>{shoesData.content}</p>
        <p>{shoesData.price}</p>
      </div>
    </>
  );
}

.map 사용 : 반복코드, i 인덱스 활용하기

반복되는 코드를 map으로 간결하게 만들고, 데이터가 추가되는 경우에 필수이다. 추가될때마다 직접 코딩할 필요가 없다.
또한 2번째 파라미터인 idx 인덱스 순서를 활용하여 신발의 사진의 순서를 맞출 수 있다.

• i : i에 인덱스 배열의 요소 순서를 담아 props 로 자식 컴포넌트에 전달한다.
• src : 변수를 사용하려면 {} 내에 작성해줘야하며, 문자열 내에 문자와 변수를 동시에 사용하려면 {문자문자${변수}문자} 리터럴 방식을 사용해야한다.

<div className="product-container">
          <div className="row">
            {shoesData.map((shoes, i) => {
              return (
                <ShoesProducts shoesData={shoesData[i]} i={i}></ShoesProducts>
              );
            })}
          </div>
        </div>

.....

function ShoesProducts({ shoesData, i }) {
  return (
    <>
      <div className="col-md-4">
        <img
          src={`https://codingapple1.github.io/shop/shoes${i + 1}.jpg`}
        ></img>
        <h3>{shoesData.title}</h3>
        <p>{shoesData.content}</p>
        <p>{shoesData.price}</p>
      </div>
    </>
  );
}