JSX + Props

1. 컴포넌트에 prop name과 value를 주기. 

import React from 'react';  
function Food() {
  return <div>I love potato</div>
}

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

export default App;

 

<Food name="kimchi"/>

은 HTML 구조와 몹시 유사하게 생겼다.

 

꼭 name이 아니어도 괜찮다.

 

import React from 'react';  
function Food() {
  return <div>I love potato</div>
}

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

export default App;

 <Food fav="kimchi"/>

 fav라는 이름의 프로퍼티를 김치라는 value로 준 것. 

 

당연히 이런 식으로도 된다.

 

function App() {
  return (
    <div>
      <h1>hello!</h1>
      <Food fav="kimchi" something={true} array={ ["hello",1,2,3]}/>
       
    </div>
  );
}

 

이제 이 프로퍼티를 어떻게 쓰면 좋을까?

 

 

 

2. 앞서 만들어준 Food 에서 인자를 넣어보면 알 수 있다.

function Food(props) {
  console.log(props);
  return <div>I love potato</div>
}

콘솔로그를 찍어보면,

우리가 프로퍼티를 넣어주었던 정보가 담겨져 있다.

 

 

3. 김치를 꺼내보자.

import React from 'react';  
function Food(props) {
  console.log(props.fav);
  return <div>I love potato</div>
}

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

export default App;

 일반적으로 원하는 오브젝트의 value를 꺼내기 위해 props.fav를 쓰면 되지만,

프로퍼티에서 object를 꺼내는 방법이 있다.

 

function Food({ fav}) {
  console.log(fav);
  return <div>I love potato</div>
}

 

값은 kimchi로 같다.

 

즉 

 

{fav} 는 

props.fav

 

와 같다.

 

 

이를 응용하면 이렇게 할 수 있다.

 

import React from 'react';  
function Food({ fav}) {
  return <div>I love { fav}</div>
}

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

export default App;

결과 :

hello!

I love Kimchi

 

 

import React from 'react';  
function Food({ fav}) {
  return <div>I love { fav}</div>
}

function App() {
  return (
    <div>
      <h1>hello!</h1>
      <Food fav="kimchi"/>
      <Food fav="라면"/>
      <Food fav="만두"/>
      <Food fav="스파게티"/>
       
    </div>
  );
}

export default App;

 

 

4. map을 이용해서 효율적으로 사용해보자.

 

import React from 'react';  
function Food({ name, picture}) {
  return <div>
    <h2>I love {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(here => <Food name={here.name} picture={ here.image}/>)}
    </div>
  );
}

export default App;