localStorage로 만드는 최근 본 상품 기능 1 / 질문있습니다.

[신기훈]

강의 다 수강중인데

홈 화면에서 이미지 클릭하면 detail0 , 1,  2 페이지들이 나오는 수업은 따로 하지 않은 것 같은데
제가 놓치고 못 들은 것인가요?

저는 구현을 한 적이 없는데 이미 이번 강의에서는 구현이 되어 있어서 여쭤봅니다.

onClick과 navigate 이용하여 혼자 구현해보려고 하였는데 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
        <div className="row">
        { shoes.map(function(a, i){
        return <Card shoes={shoes[i]} i={i+1}></Card>
    })};
    
       </div>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
function Card(props){
  return(
  <div className="col-md-4">
  < img src={`https://codingapple1.github.io/shop/shoes${props.i}.jpg`} width="80%"></img>
   <h4>{props.shoes.title}</h4>
   <p>{props.shoes.content}</p>
  </div>
  )
}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이렇게 props로 연결 되어 있는 곳에 대입하려니 막막하네요.

[신기훈]

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
        <div className="row">
        { shoes.map(function(a, i){
        return <Card shoes={shoes[i]} i={i} navigate={navigate}></Card>
    })};
    
       </div>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
function Card(props){
  return(
  <div className="col-md-4">
  < img src={`https://codingapple1.github.io/shop/shoes${props.i+1}.jpg`} width="80%"
  onClick={()=>{
   props.navigate(`/detail/${props.i}`)
  }}></img>
   <h4>{props.shoes.title}</h4>
   <p>{props.shoes.content}</p>
  </div>
  )
}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

겨우 선생님처럼 구현하였습니다..

코드에 대한 답은 안 달아주셔도 됩니다!

다만 궁금한 부분이
제가 강의를 들었을 때 이미지 클릭시 페이지 넘어가는 것(사진 변경 포함)을 구현하라고 한 적이 없으신 것 같은데
제가 강의를 놓친 것일까요?

만약 그런거라면 반성하고 더욱 열심히 듣겠습니다.

[codingapple]

알아서 하라고 한거같은데 기억이 안납니다

[글쓴이]

글