React hooks 데이터 불러와서 뿌리기

1) useEffect에서 server에서 데이터 불러오기

 : (알맞은 조건을 설정하여..) (axios, find 메서드 사용)

 

2) if response.data.success 하면 => useState에 data 정보를 저장하기

      ex ) [ Product, setProduct ] = useState( [ ] )

 

=> state에 data 전체 정보가 array로 저장된다.

 

3) State에 mapping한다.

 

Product . map ( (product, index) =>{

      return (

           <div> { product.name } </div>

      )

}) 

 

 

const [Products, setProducts] = useState([])

useEffect(() => {
  let body={category:'인생뷰티'}
  
  Axios.post('/api/product/lists', body)
    .then(response=>{
        if(response.data.success){
            setProducts(response.data.products)
        }
    })
  }, [])

const productBox=Products.map((product, index)=>{
  return(
      <div>
          <img src={product.filePath} alt="상품"/>
          <h3>{product.name}</h3>
          <span>{`${product.sellingPrice}원`}</span>
      </div>
  )
})

return(
  <div>
      {productBox}
  </div>
)