인프런 커뮤니티 질문&답변

그랩님, 강의 잘 듣고 있습니다.

다름이 아니라, 상품 상세 페이지 에러와 의문점이 있어서 어떻게 해결해야 하는지 궁금한 사항이 있어 질문 드리게 되었습니다.

1. 일단 src/main/index.js 소스 코드를 첨부합니다.

   
   

   import './index.css';
   import axios from "axios";
   import React from 'react';
   import {Link} from 'react-router-dom';
   function MainPage(){
       const [products, setProducts]=React.useState([]);
       React.useEffect(
           function(){
               axios.get("제 mock 서버 주소 넣었습니다/products")
               .then(function(result){
                   const products=result.data.products;
                   setProducts(products);
               }).catch(function(error){
                   console.error("에러 발생:",error);
               });
       },[]); return ( 
           <div>    
           <div id="header">
           <div id="header-area">
               <img src="../images/icons/logo.png" />
           </div>
       </div>
       <div id="body">
           <div id="banner">
               <img src="../images/banners/banner1.png" />
           </div>
           <h1>판매되는 상품들</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>
               <div className="product-contents">
                   <span className="product-name">{product.name}
                   </span>
                   <span className="product-price">{product.price}원
                   </span>
                   <div className="product-seller">
                       <img className="product-avatar" src="../images/icons/avatar.png" />
                       <span>{product.seller}</span>
                   </div>
               </div>
               </Link>
   
               </div>
               
               
           ); 
                   }) 
               }
   
           </div>
           </div>
       
       <div id="footer"></div>
       </div>
       );
   }
   
   export default MainPage;

   2.src/product/index.js 소스 첨부합니다.
   

   import {useParams} from 'react-router-dom';
   import axios from "axios";
   import { useEffect, useState } from 'react';
   function ProductPage(){
       // const params=useParams();
       const {id} = useParams();
       const [product, setProduct] = useState(null);
       useEffect(function(){
           axios.get('제 mock 서버 주소 넣었습니다/products/${id}'
           )
           .then(function (result) {
               setProduct(result.data);
               // console.log(result);
           }).catch(function(error){
               console.error(error);
           }
       );
       },[]);
       console.log(product);
       
       // console.log(params);
   
       return <h1>상품 상세 페이지 {id} 상품</h1>;
   }
   export default ProductPage;

   
   -->여기서부터 의문점과 문제점이 발생하게 되니 읽어주시고 해결할 수 있는 방법을 알려주시면 좋겠습니다. 위 소스에서

   axios.get('제 mock 서버 주소 넣었습니다/products/${id}') 처럼 소스를 달러 중괄호 아이디 입력하면, 아래와 같은 첨부 사진처럼 에러가 납니다.

   
   

   

   
   --> 위 에러 첨부 사진은 어떻게 해결해야 할까요?

   
   
   3. 하지만, 위 소스대로 입력 안하면
   axios.get('제 mock 서버 주소 넣었습니다/products/1') 하면 제대로 데이터를
   오류 없이 아래 첨부 사진처럼 받아 오는 것을 알 수 있습니다.
   

   

   
   

   
   
   3-1. 그랩님, 강의 소스에서 처럼 axios.get('제 mock 서버 주소 넣었습니다/products/${id}')해서 하면 위 첨부 사진 처럼 에러가 나는데요, 성공적으로 오류 없이 불러오고 싶은데요, 어떻게 해야 하나요?

    

   
   단계별로 어떻게 소스를 수정해야하는지 알려주시면 좋겠습니다.
   
   확인하시면 답변 부탁 드립니다.