상품상세페이지에서 잘 안됩니다.

Question

보시는것과 같이 이렇게 뜹니다 혹시 몰라 제가 입력한 코드도 함께 보여드립니다 보시고 틀린 부분은 꼭 가르쳐주세요! 상품 상세 페이지구현 2에서 헤더와 바디, 푸터 외에는 css는 아직 하지 않았습니다. App.js import './App.css' ; import MainPageComponent from "./main/index.js" ; import {Switch, Route} from "react-router-dom" ; import UploadPage from './upload' ; import ProductPage from './product' ; function App () { return ( < div > < div id = "header" > < div id = "header-area" > < img src = "/images/icons/logo.png" /> < div id = "body" > < Switch > < Route exact ={ true } path = "/" > < MainPageComponent /> < Route exact ={ true } path = "/products/:id" > < ProductPage /> < Route exact ={ true } path = "/upload" > < UploadPage /> < div id = "footer" > ); } export default App ; product/index.js import {useParams} from "react-router-dom" ; import axios from "axios" ; import { useEffect, useState } from "react" ; function ProductPage (){ const {id} = useParams (); const [product, setProduct ] = useState ( null ); useEffect ( function (){ axios. get ( `https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products/ ${ id } ` ) . then ( function ( result ){ setProduct ( result .data); }). catch ( function ( error ){ console. error ( error ); }) },[]) if (product === null ){ return < h1 >상품 정보를 받고 있습니다... } return ( < div > < div id = "image-box" > < img src ={ "/" + product.imageUrl } /> < div id = "profile-box" > < img src = "/images/icons/avatar.png" /> < span > { product.seller } ); } export default ProductPage ; main/index.js import React from "react" ; import "./index.css" ; import axios from "axios" ; import {Link} from "react-router-dom" ; function MainPage (){ const [products, setProducts ] = React . useState ([]); React . useEffect ( function (){ axios. get ( "https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products" ). then ( function ( result ){ console. log ( result ) const products = result .data.products; setProducts (products); }). catch ( function ( error ){ console. error ( "에러발생 : " , error ) }) },[]) return ( < div > < div id = "banner" > < img src = "images/banners/banner1.png" /> < h1 >판매되는 상품들 < div id = "product-list" > { products. map ( function ( product , index ){ return ( < div className = "product-card" > < Link className = "product-link" to ={ `/products/ ${ product .id } ` } > < div > < img className = "product-img" src ={ product .imageUrl } /> < div className = "product-contents" > < span className = "product-name" > { product .name } < span className = "product-price" > { product .price } 원 < div className = "product-seller" > < img className = "product-avatar" src = "images/icons/avatar.png" /> < span > { product .seller } ) }) } ); } export default MainPage ;

그랩 · Answer

현재 Mock API 서버를 확인해보니 JSON 형식에 맞지 않게 응답을 보내는 것 같아요 그래서 API 응답 결과를 화면으로 보여주는 과정에서 데이터가 없는 것으로 보이구요. imageUrl: ... 끝에 , 를 붙여주셔야 합니다. json은 key:value에 마지막을 제외하고는 ,를 꼭 붙여주셔야 합니다! https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products/1