ReactJS 2일차

#2.0 Creating first React Component

• component는 HTML을 반환하는 함수이다.
• jsx는 javascript와 HTML 사이의 조합이다.
• component를 만드는 방법
  - import React from 'react'; 적지 않으면 react는 jsx에 있는 component를 사용하는 것을 이해하지 못한다.
  - react application은 한 번에 하나의 component만 rendering할 수 있다. 따라서 다른 component를 App component안에 넣어줘야한다.

import React from 'react';
function Potato() {
  return <h1>I like Potato</h1>;
}

function App() {
  return (
    <div>
        <h1>Hello!</h1> 
      <Potato />
    </div>
  );
}

export default App;

---

#2.1 Reusable Components with JSX+Props

• component에 정보를 보낼 수 있다.

<Food fav = "kimchi" />

• food component에 fav라는 이름의 property를 kimchi라는 value로 준 것.

import React from 'react';

function Food({fav}) { //{fav} 대신 props라 쓰고
  return <h1>I like {fav}</h1>; //여기에 fav대신 props.fav로 쓸 수 있다.
}

function App() {
  return (
    <div>
        <h1>Hello!</h1> 
      <Food fav="kimchi" />
    </div>
  );
}

export default App;

fav = "kimchi" -> component에 넣게 되는 것들을 props라고 하자.
props는 argument로 간다.

---

#2.2 Dynamic Component Generation

• Map : array의 각 item으로 function을 실행한 후 array를 리턴하는 javascript 함수이다.

import React from 'react';

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>
        
      {foodIlike.map(dish => <Food name ={dish.name} picture={dish.image}/>)}

    </div>
  );
}

export default App;

• 위의 오류는 map함수 사용시 해당 객체에 key가 없기 때문에 발생한다. key값을 설정해주면 해결된다.

const foodIlike = [
  {
    id : 1,
    name: "Kimchi",
    image:
      "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
    },
  {
    id : 2,
    name: "Samgyeopsal",
    image:
      "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"
    },
  {
    id : 3,
    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"
    },
  {
    id : 4,
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
    },
  {
    id : 5,
    name: "Kimbap",
    image:
      "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"
    }
];

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

    </div>
  );
}

---

2.4 Protection with PropTypes

• prop-types : 내가 전달받은 props가 내가 원하는 props인지 확인할 수 있다.

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 : 4
    },
  {
    id : 2,
    name: "Samgyeopsal",
    image:
      "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg",
      rating : 5
    },
  {
    id : 3,
    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",
      rating : 5.4
    },
  {
    id : 4,
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg",
      rating : 5.5
    },
  {
    id : 5,
    name: "Kimbap",
    image:
      "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg",
    rating : 4.7
    }
];

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 = { //propTypes 첫글자가 소문자여야 한다.
name : PropTypes.string.isRequired, 
picture : PropTypes.string.isRequired,
rating : PropTypes.number.isRequired
};

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

    </div>
  );
}

export default App;