티스토리 뷰
Dynamic Component Generation Map!
위의 함수를 dynamic 하게 만들기 위해서는 Javascript의 Map을 이용한다.
위의 함수는 효율적이지 않고, 음식을 추가하기 위해서는 한줄을 더 써야한다.
const 는 배열을 담는 변수
JAVE Script의 Map을 이용할 것 이다.
const friends = ["dal","mark","japan guy"]
frieneds.map은 freieneds 라는 배열에 각각 map 이하의 function을 취해서 그 function을 array의 각 item에 적용한다는 뜻이다.
dal, mark, lyn 이 있는 frieneds array에 console 및 ㅗ를 추가하는 함수를 각각 적용한 것이다.
따라서 map은 array를 취하고 우리가 정확히 원하는 array를 반환한다.
foodILike 이름의 array에 map을 취하고
Food 함수를 각각 적용한다. Food의 props에는 name 과 image 가 있고 name에는 FoodILike 오브젝트의 이름을 image에는 오브젝트의 Image 주소를 보낸다.
결과화면은 아래와 같다.
