#2.2 Dynamic Component Generation

우리가 앞서 한 일들은 효율적이지 않아. 왜냐하면 우리가 새로운 음식을 추가할때마다 복사 붙여넣기를 해야하거든

<Food favorites="kimbab" /> 이 문장을 계속 반복해야 함.

우리는 복붙을 원하지 않는다~!!

데이터는 원래 처음부터 우리가 가지고 있던 데이터가 아니기 때문이다. 이 데이터들은 웹사이트에서 온 데이터들이다. 따라서 우리는 갖고 있지 않은 데이터를 복붙할 수 없다!

 

따라서 내가 보여주려고 하는 방법은 웹사이트에 동적 데이터를 추가하는 방법이다.

우리가 할 것은 데이터가 있다고 시뮬레이션하는 것이다. 데이터가 이미 API에서 왔다고 상상해보자

 

그래서 할 일은 함수를 만드는 것이다.

다른 함수는 foodILike로 불리는 array이다. 이것의 food의 배열이 될 것이다. food의 object 배열이 될 것이다.

 

const foodILike = [] 에는 내가 넣고 싶은 데이터들을 형식을 갖춰 여러 개의 {}로 만든다.

 

function App(){

    return (

        {} // 여기에다가 어떤 마법을 부린다. component들을 rendering 할 것이다.

    );

}

그래서 어떻게 foodILikde (object)의 list를 가져오는지 보여줄 것이다. 오직 JavaScript의 object들만

그리고선 function Food를 동적으로 rendering할 것이다.

 

1. foodILike에 데이터를 넣는다. name, img

어떻게 이 긴 array를 자동적으로 foodILike과 함께 rendering하지? JavaScript 함수를 이용해라!

 

JavaScript의 map이라는 것을 이용하기!!!!!!

const freind = ["dal", "mark", "lynn", "korean"]

> friends

▶ (4) ["dal", "mark", "lynn", "korean"]

# 이름 옆에 작은 하트를 더하고 싶음 ! => 이때 map을 이용하는 것임.

map이란 array의 각 item에서 function을 실행하는 array를 가지는 JS function이며, 그 function의 result를 갖는 array를 준다.

> friends.map(currnet => {console.log(current); return 0})

또는 하트를 붙이려면!

> friends.map(function(potato){

        return potato + " 하트";

})

▶ (4) ["dal 하트", "mark 하트", "lynn 하트", "korean 하트"]

 

즉, {배열명.map(x => (

    <Food name={x.name}, picture={x.img}/>

))}

으로 해야한다.

x 안에 있는 것들이 object들이다. object에는 name과 img가 있는 것을 볼 수 있다.

 

일반적인 javascript object처럼 이 object 내부에서도 object.name, object.img를 가질 것이다.

 

 

 

1. Food()의 형식을 지정해주고

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

2. const ~~~ = []에 들어갈 데이터를 넣어주고,

const foodILike = [{
  name : "Kimchi",
  img : ""
},
{
  name : "Samgiopyal",
  img : ""
},
{
  name : "Bibimbab",
  img : ""
},]

3. App()에서 map을 통해 Food()로 데이터를 보내준다.

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