자스 - JSX & Props

만약에 우리가 데이터를 보여주게 될때 json 형식으로 데이터를 받을꺼에요
python 에서

def get ( self ,request) : 
	...
    return JsonResponse("data":list(data) , status =200)

보내게 되면 우리는 json 형식으로 데이터를 받을꺼에요
이 json 형식이 javascript 에서는 Objects 랑 아마 닮아 있을겁니다 ^^
그래서 ~

<Food fav = "kimchi" />
<Food fav = "kimchi" />
<Food fav = "kimchi" />
<Food fav = "kimchi" />
<Food fav = "kimchi" />
<Food fav = "kimchi" />

이런식으로 여러개를 만들것이 아니라

const foodILike= [{}]; 

이렇게 객체를 생성해 보는거죠 ^^

import React from "react";

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

const foodILike = [
  {
    name: "Kimchi",
    image:
      "https://postfiles.pstatic.net/MjAxOTA0MjRfMTUy/MDAxNTU2MDY3OTI2NDI2.mcoYhKVZZNikIIjbzaZvLxy4sDxtVO9VNXP2elIlAAgg.qHmVnoQ9uYU5jyZVt81k0NxaevAGA9ZXwVc_MSzC76og.JPEG.nagilfood/%EC%88%98%EC%9E%85%EA%B9%80%EC%B9%98-%EC%8D%B0%EC%9D%80%EA%B9%80%EC%B9%98_(1).jpg?type=w773"
  },
  {
    name: "Samgyepsal",
    image:
      "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.siksinhot.com%2Ftheme%2Fmagazine%2F1537&psig=AOvVaw1IJypkc-q6CAfOw8jmRX64&ust=1585812064407000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCICglbjYxugCFQAAAAAdAAAAABAD"
  }
];

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

export default App;

function App() {
  return (
    <div>
      {foodILike.map(dish => (				[1]
        <Food name={dish.name} picture={dish.image} />	[2]
      ))}
    </div>
  );
}

[1] : dish 는 각각의 아이템을 의미한다.
[2] : 그러니 지금 첫번째 dish 에는 name 과 image 가 있을테니깐 불러온다.