import React from 'react';
import PropTypes from 'prop-types';

const foodILike = [
  {
    id: 1,
    name: 'Kimchi',
    image: 'http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg',
    rating: 5,
  },
];

function Food({ name, picture, rating }) {
  return (
    <div>
      <h2>I like {name}</h2>
      <h4>{rating}/5.0</h4>
      <img src={picture} alt={name} />
    </div>
  );
}
Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number,
};

function App() {
  return (
    <div>
      {foodILike.map(dish => (
        <Food key={dish.id} name={dish.name} picture={dish.image} rating={dish.rating} />
      ))}
    </div>
  );
}

export default App;
[코드] 9월 2일 목요일 

9월 3일 금요일

• React는 자동적으로 class component 의 render method를 실행한다.
  • class component를 이야기 하는 이유는 state 때문이다.

• 매 순간 setState 을 호출할떄마다, react는 새로운 state과 함께 render function을 호출한다.

• constructor는 JS에서 class를 만들 때 호출된다.

• useState 를 호출하면 , component를 호출하고, 먼저 render를 호출한 다음에 업데이트가 완료 되었다고 말하면 componentDidUpdate가 실행된다.

component life cycle

componentDidMount() {
    console.log('component rendered');
  }
  componentDidUpdate() {
    console.log('i just updated');
  }
  componentWillUnmount() {
    console.log('Goodbye, cruel world');
  }

• render를 하면 호출되는 life cycle method는 무엇인가?
  • componentDidMount에서 data fetch하기