4. 쇼핑몰 웹사이트 만들기 (18)

<//4. 상품 디테일을 눌렀으나,로그인이 안되어있을 경우에는 로그인 페이지가 먼저 나온다.(17에서 함)>

상품을 눌렀을 때 디테일 페이지로 넘어가는 작업을 해보자!

 

ProductCard.js 전체 코

상품 디테일은 ProductCard(.js)에 나와있다.

 

카드를 클릭했을때, onClick ! 이름 showDetail이라는 함수

const ~: showDetail 이라는 함수를 생성

 

새로운 페이지로 넘어가고 싶다면....  useNavigate사용!

const ~: navigate라는 함수를 생성 

 

useNavigate를 import시킨다.

 

navigate(' ') : navigate라는 함수를 이용해서 ' '안에 가고싶은 곳을 써주면 된다.

product가 있는 곳에 가기 전에 상품의 id(클릭한게 누군지)를 넘겨주어야 한다.. 왜냐하면 클릭한 id를 알려줘야 그 id의 아이템에 대한 정보를 json(서버)에서 가져올 것이기 때문!

 

클릭한 애가 누군지 그 id값을 주어야 한다.

(내 json 파일에는 모든 아이템에 id값이 이미 있음 ㅎ)

 

[ navigate(`/product/${item.id}`) ]

 

${item.id} 에 아이템 값을 넘겨주겠다.

${item.id} 에는 다이나믹한 값이 들어간다.

클릭한 아이템마다 id가 다 다르니까 여기는 동적으로 변할 수 있다. 

ex.{item.id} = item에 있는 id

item에 있는 id값을 뒤에 파라미터 값로 동적으로 넘겨준다.

 

 

<결과화면>

초기 화면

 

카드 하나를 선택하면...

로그인 페이지가 나온다.

로그인을 한 후

카드 하나를 선택하면...

상단 일부

/product/2 가 보인다.

 

전체적으로 보면....

상품 디테일 페이지로 정상적으로 이동이 된다,
(이 페이지는 아직 아무것도 들어있지 않은게...정상!)