React로 웹 개발하기 - 2 수강후 에러 메시지 문의입니다. npm start 하여 로컬호스트 화면에 아래의 메시지가 나오는데 해결이 안됩니다. 어디에 문제가 있는건지 문의드립니다. × TypeError: Cannot read properties of undefined (reading 'map') MainPage C:/Users/hanthene/Documents/github/grab-market-web/src/main/index.js:33 30 | <img src="images/banners/banner1.png" /> 31 | </div> 32 | <h1>판매되는 상품들</h1>> 33 | <div id="product-list"> | ^ 34 | {products.map(function(product, index) { 35 | return ( 36 | <div className="product-card">View compiled ▶ 18 stack frames were collapsed. (anonymous function) C:/Users/hanthene/Documents/github/grab-market-web/src/main/index.js:15 12 | .then(function(result){ 13 | console.log(result); 14 | const products = result.data.products;> 15 | setProducts(products); | ^ 16 | }) 17 | .catch(function(error){ 18 | console.error('에러 발생 : ',error);View compiled This screen is visible only in development. It will not appear if the app crashes in production.Open your browser’s developer console to further inspect this error. 에러가 나는 상태의 파일 그대로 GITHUB에 퍼블릭으로 올려놓았습니다. https://github.com/ucoder-git/grab-market-client 아래는 package.json 입니다. {   "name": "grab-market-web",   "version": "0.1.0",   "private": true,   "dependencies": {     "@testing-library/jest-dom": "^5.16.3",     "@testing-library/react": "^12.1.4",     "@testing-library/user-event": "^13.5.0",     "axios": "^0.26.1",     "react": "^17.0.2",     "react-dom": "^17.0.2",     "react-scripts": "^2.1.3",     "web-vitals": "^2.1.4" }, 아래는 src폴더의 index.js 파일입니다. import React from 'react'; import './index.css'; import axios from "axios"; function MainPage() {     const [products, setProducts]= React.useState([]);     React.useEffect(function() {             axios             .get(                 "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"                 )             .then(function(result){                 console.log(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">                 <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>             </div>                 );             })}         </div>     </div>     <div id="footer"></div>     </div>     ); } export default MainPage;  

  리스트렌터링 부분에서 최상위 태그가 없어서 에러가 난다는 부분에 대해서 다시 한번 설명 부탁드리겠습니다. <h2></h2> 부분을 같이 쓰고 싶다면 어떻게 최상위태그로 묶어주어야하나요? import Diarycotent from "./Diarycontent"; const DiaryList = ({ diarylist }) => {   console.log(diarylist);   return (     <div>       <h2>일기장 list</h2>       <div>         {diarylist.map((it) => (           <div>             <Diarycotent />           </div>             <div><h2>aaaaaaaaa</h2></div>         ))}       </div>     </div>   ); }; export default DiaryList;

제로초님 안녕하세요 다름이 아니라. 제가 신발 상세 페이지에서 json 에 신발 사이즈 Array(10) 개가 있고. 0,1,2,3,4,5,6,7,8,9,10 이 있습니다 id 값이. 각 id 값 마다 이미지를 부여 하고 싶습니다. 예시로 들자면? 만약 Array 중 id 값 -> 8 인 값에 예시로 구름 이미지를 넣어주고 싶고, id 값 중 5 인 값에는 햇님 이미지를 넣어주고 싶습니다. 제가 프론트쪽 공부해서. 백단에서 이미지를 넣어주면 되지만, 프론트에서 한번 id 값마다 특정 이미지를 넣어주고 싶은데 어떻게 해야 할 지 감이 안옵니다 ㅠㅠㅠ 도와주세요