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

이제 정보를 보여주기만 하면 된다!

 

api 데이터 정보를 state에 담아둔다.

처음에는 모르니까 null을 입력한다.

 

useState를 import 시킨다.

 

getProductDetail함수를 호출할 때마다 데이터를 가지고 올 수 있게 되었다~!

 

이제 남은건?

데이터를 보여주면 되지!

 

 

 

 

product가 있다면 img를 보여준다.

product가 있다면 title를 보여준다.

product가 있다면 안에 price가 들어간다.

 

Container,Row,Col을 react-bootstrap으로부터 import 시킨다!

 

<실행 결과>

 

< 참고!> 

사실 이 과정에서 오류가 났다ㅜㅠ

 

<해결>

1. false를 true로!!

App.js

2.

ProductDetail.js

< >

 

[ 만약 이미지를 조금 오른쪽으로 옮기고 싶다면? ]

 

<실행 결과>

 

<알고리즘 단계>

//1. 전체 상품 페이지, 로그인 페이지, 상품상세 페이지 - 3개의 페이지 (가 필요) -완료-

//1-1. 네비게이션 바 (만들기.생성) !!!  -완료- 

//2. 전체 상품 페이지에서는 전체 상품을 볼 수 있다.   -완료-

//3. 로그인 버튼을 누르면 로그인 페이지가 나온다.

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

//5. 로그인이 되어있을 경우에는, 상품 디테일(상세) 페이지를 볼 수 있다. -완료-

//6. 로그아웃 버튼을 클릭하면 로그아웃이 된다.

//7. 로그아웃이 되면 상품 디테일(상세) 페이지를 볼 수 없고 다시 로그인 페이지가 보인다.

//8. 로그인을 하면 로그아웃이 보이고 로그아웃을 하면 로그인이 보인다.(상단 오른쪽)

//9. 상품을 검색할 수 있다.