[10-11] JSX & PROPS & STATE

react는 component와 함께 동작한다.
jsx는 js를 확장한 문법이다.
App은 html이 아니라 html을 반환하는 함수인 component이다.
component는 html과 같은 형태를 가진다.

react는 재사용 가능한 component를 만들 수 있다.
component의 argument로 props를 넣는다.

import React from "react";
import Potato from "./Potato";

function Food({ favourite }) {
  return <h1>I like {favourite}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Potato />
      <Food favourite="kimchi" />
      <Food favourite="ramen" />
      <Food favourite="samgiopsal" />
      <Food favourite="chukumi" />
    </div>
  );
}

map을 사용하면 함수 안에 key값을 반복하지 않아도 밖에서 간단하게 구현할 수 있다. map이 자동으로 넣어주고 return 해주기 때문이다.

import React from "react";

function Food({ favourite }) {
  return <h1>I like {favourite}</h1>;
function Food({ name, picture }) {
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture} />
    </div>
  );
}

const foodILike = [
  {
    name: "Kimchi",
    image:
      "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
  },
  {
    name: "Samgyeopsal",
    image:
      "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"
  },
  {
    name: "Bibimbap",
    image:
      "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
  },
  {
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
  },
  {
    name: "Kimbap",
    image:
      "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"
  }
];

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food favourite="kimchi" />
      <Food favourite="ramen" />
      <Food favourite="samgiopsal" />
      <Food favourite="chukumi" />
      {foodILike.map(dish => (
        <Food name={dish.name} picture={dish.image} />
      ))}
    </div>
  );
}

state는 object이고 바꾸고 싶은 data를 넣는다.
react는 자동적으로 class컴포넌트의 랜더메소드를 실행한다.
함수 형태의 컴포넌트에서 props를 이용해서 데이터를 다루는건 한계가 있기 때문에 state를 이용한다.
state를 사용하려면 react 컴포넌트에서 상속받은 클래스 컴포넌트를 이용해서 사용한다.

class App extends React.Component {
  state = {
    count: 0
  };
  add = () => {
    console.log("add");
  };
  minus = () => {
    console.log("minus");
  };
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }

setState를 호출할 때마다 react가 새로운 state와 render function을 호출한다.

• constructor()
  component가 mount될 때 호출된다.
• componentDidMount()
  component가 처음 render될 때 호출된다.
• componentDidUpdate()
  component가 업데이트 될 때 호출된다.
• compoentWillUnmount()
  페이지 나갈 때 한다.

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

class App extends React.Component {
  state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  componentDidMount() {
    console.log("Component rendered");
  }
  componentDidUpdate() {
    console.log("I just updated");
  }
  componentWillUnmount() {
    console.log("Goodbye, cruel world");
  }
  render() {
    console.log("I'm rendering");
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>