React 컴포넌트 질문입니다!

#1 
<div className="container"> {/* 상품리스트  */}
      <div className="row">
        {
          shoes.map((a,i)=> {
            return <Product i={i} shoes={shoes[i]} key={i} />
          })
        }
      </div>
    </div>

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

첫번째 코드를 컴포넌트에 집어넣고 싶은데, 처음이라 전혀 감이 잡히질 않고, 구글링해봐도 너무 어려운 말이 많아 질문합니다. 다른 피드백도 얼마든지 환영입니다 ㅎㅎ

#2 
{ props.shoes.content } & { props.shoes.price }

대신에

{`${props.shoes.content} & ${props.shoes.price}`}

로 바꿔보실래요?

1 Like
#3

먼저 답변에 감사드립니다!!

하지만 질문에 정보가 부족했던 탓인지, 문제 해결이 되지 않아 자세히 말씀드립니다.
상품리스트를 SellList 라는 컴포넌트로 새로 만들어 코드를 짧게 줄이고 싶은 상황입니다. 그러려다보니 SellList 컴포넌트 안에 Product 컴포넌트가 포함되는데, 이때 props 를 어떻게 받아야하는지 모르겠습니다…

function SellList(props){
  return (
    <div className="container"> {/* 상품리스트  */}
      <div className="row">
        {
          props.shoes.map((a,i)=> {
            return <Product i={i} shoes={shoes[i]} key={i} />
          })
        }
      </div>
    </div>
  )
}

제가 시도했던 코드입니다. 잘모르는 채로 어떻게 해보려곤 했지만 어렵네요.

#4 
const shoes = [
  { title: "title1", content: "content1", price: "price1" },
  { title: "title2", content: "content2", price: "price2" },
  { title: "title3", content: "content3", price: "price3" },
  { title: "title4", content: "content4", price: "price4" },
];

function SellList(props) {
  return (
    <div className="container">
      {" "}
      {/* 상품리스트  */}
      <div className="row">
        {props.shoes.map((a, i) => {
          return <Product i={i} shoes={shoes[i]} key={i} />;
        })}
      </div>
    </div>
  );
}

function Product(props) {
  return (
    <div className="col-md-4">
      <img
        src={
          "https://codingapple1.github.io/shop/shoes" + (props.i + 1) + ".jpg"
        }
        width="100%"
      />
      <h4>{props.shoes.title}</h4>
      <p>{`${props.shoes.content} & ${props.shoes.price}`}</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <SellList shoes={shoes} />
    </div>
  );
}

export default App;

SellList의 props인 shoes가 어떻게 되어있는지 몰라서 제가 나름대로 배열을 만들고 create-react-app 명령어 이후 app.js 위치에서 돌려본 코드입니다.

도움이 되었으면 좋겠네요.

1 Like
#5

정성스런 답변 감사합니다!!! 좋은 하루 보내세요!! :slight_smile:

1 Like