오류 문제입니다.

Question

product가 정의되어 있지 않다는 오류가 뜹니다. 어떻게 해야할까요? import " ./index.css "; import axios from " axios "; import React from " react "; function MainPage () { const [ products , setProducts ] = React . useState ([]) ; React . useEffect ( function () { axios . get ( " https://1a135b44-e524-4168-8a97-42364bfed983.mock.pstmn.io/products " ) . then ( function ( result ) { const products = result . data . products ; setProducts ( products ) ; } ) . catch ( function ( error ) { console . log ( " 에러발생 : " , error ) ; } ) ; }, []) ; return ( < div > < div id = " header " > < div id = " header-area " > < img src = " images/icons/logo.png " /> < div id = " body " > < div id = " banner " > < img src = " images/banners/banner1.png " /> < h1 > 판매되는 상품들 < div id = " product-list " > < div className = " product-card " > < 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 } < div id = " footer " > ) ; } export default MainPage ;

그랩 · Answer

수업 내용을 보시면 products.map(function (product, ... 하는 부분이 존재합니다. products라는 Array형태의 state를 순회(반복)하면서 product card를 return하는 역할을 합니다. 올라간 소스코드를 확인해보시면 좋을 것 같아요.