TypeError: Cannot read properties of undefined (reading 'map')

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"><button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:1008px;text-align:left;background:#ffffff;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>

<button style="color:#293238;cursor:pointer;display:block;width:1008px;text-align:left;background:#ffffff;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;margin-bottom:1.5em;border:initial none initial">▶ 18 stack frames were collapsed.</button>

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);<button style="margin-bottom:1.5em;color:#878e91;cursor:pointer;display:block;width:1008px;text-align:left;background:#ffffff;font-family:Consolas, Menlo, monospace;font-size:1em;padding:0px;line-height:1.5;border:initial none initial">View compiled</button>

{

  "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"

},

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;