<div className="card-container">
<img src=이미지 주소 alt="" />
<h2>Name</h2>
<p>Email</p>
</div>
<Card />
컴포넌트를 리턴 (Card.js에 넘겨야 하는 props는 몬스터 객체의 id, name, email)conponentDidMount(), fetch(), setState()
(setState는 state 객체 내에 monsters라는 key 값에 저장)<CardList />
에 전달componentDidMount()
메소드를 통해 라이프 사이클 이해fetch()
함수를 사용해 API 호출Array.map()
함수를 통해 component를 재활용props
를 사용해 단방향(부모 컴포넌트 > 자식 컴포넌트)으로 데이터 전달src
Pages
Product
conponentDidMount(), fetch(), setState()
(setState는 state 객체 내에 products라는 key 값에 저장)<ProductCardList />
에 전달<div className="card-container">
<img src=이미지 주소 alt="" />
<h2>Name</h2>
<p>Email</p>
<ProductCard />
컴포넌트를 리턴 (ProductCard.js에 넘겨야 하는 props는 제품 객체의 product)Survey
index.js
Routes.js