만약에 우리가 데이터를 보여주게 될때 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 가 있을테니깐 불러온다.