API 본죽 사용해보기

ProductList.js

import React, { Component } from "react";
import Product from "./Product";

class ProductList extends Component {
  state = {
    product: [],
  };

  componentDidMount() {
    fetch("http://localhost:3000/data/ProductListData.json")
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          product: res,
        });
      });
  }

  render() {
    console.log("render");
    return (
      <div>
        {this.state.product.map((el) => {
          return <Product name={el.name} img={el.img} cost={el.cost} />;
        })}
      </div>
    );
  }
}

export default ProductList;

ProductList.js

import React, { Component } from "react";

class Product extends Component {
  render() {
    console.log(this.props.product);
    return (
      <div>
        <img src={this.props.img} />
        <p>{this.props.name}</p>
        <p>{this.props.cost}</p>
      </div>
    );
  }
}

export default Product;