API 연동하기
1. lib라는 폴더를 만들고 axios라는 파일을 만든다.
여기에 axios 인스턴스를 만들어준다.
인스턴스를 실행할 때는 baseurl을 일일이 써 줄 필요없이 경로만 작성하면된다.
2. 상품 상세 페이지로 와서 router로 받아온 id값을 사용해서
리퀘스트를 보낸다.일단 prroduct라는 State를 만든다.
async function getProduct라는 함수를 만든다.
targetId를 받아서
이 함수에서는 리퀘스트를 보낼 것이다.
아까 만들었던 axios instance를 import해준다
3. 그리고 이 값을 가지고 State값을 변경해준다.
4. 이 함수를 useEffect에서 id가 바뀔때마다 실행해준다.
useEffect는 맨처음 렌더링이 된 후에 비동기적으로 실행
5. 맨 처음에는 product의 값이 없을 것이므로 아무것도 렌더링해주지 않는다.
주의!
npm install axios 했는지 확인하고 package.json에서 확인하기
첫번째 상품, 두번째 상품, 세번째 상품을 클릭하면
해당 products/1, products/2로 바뀌면서 적절한 상품이 보여짐
SizeReviewList 이 컴포넌트는 사이즈 리뷰를 받아서 map함수로 보여주는 컴포넌트
1. [id].js에서 사이즈 리뷰를 만드는 State를 만든다.
마찬가지로 리퀘스트를 통해서 데이터를 가져온다.
results 값이 없을수도 있으니 빈 배열로 처리해준다.
SizeReviewList 컴포넌트
그러면 상품 리뷰가 보인다.
홈페이지와 검색페이지도 수정하기
우선 두 페이지에서
공통으로 사용할 상품 목록을 보여주는 컴포넌트부터 만들겠다.
ProductList를 만들어준다.
products props의 기본값으로는 빈배열을 넣었고
빈 배열일 경우에는 map함수를 실행해도 아무것도 렌더링하지 않을 것이다.그리고 css를 추가했다.
이 ProductList에는 Link가 있어서 클릭하면 각 상품에 해당하는 주소로 이동한다.이 컴포넌트를 사용해서 index.js와 search.js파일에서도 api를 연동해준다.
리퀘스트를 보내는 함수를 추가해준다.
디자인 추가하기
styles라는 폴더에 ProductList.module.css를 만들어 주었다.
결과
