[Javascript]Map(iterator)

이전부터 map메소드를 사용하긴 했는데,

이런 식으로 어떤 내용을 반복해서 불러오는 방법을 

iterator(반복자)

라고 하는가 보다.

예시로

위의 코드를 살펴보자

array.map을 하게 되면 function map이 리턴되어진다

맵은 펑션을 받나보다.

다음과 같이 리턴하게 되면

값을 출력하게 되고

함수의 첫번째 파람비터는 array의 모든 값들 인가보다.

자 이를 이용해서 비디오 리액트 리스트를 추가해 보자

import React from "react";

import VideoListItem from "./video_list_item";

const VideoList = (props) => {

const VideoItems = props.videos.map((video) => {

return <VideoListItem video={video} key={video.etag} />

})

return (

<ul>

{VideoItems}

</ul>

)

};

export default VideoList

함수형 Video리스트에

VideoItems이라는 배열을 추가하고

{VideoItems}를 렌더링 하는 방식으로

여러가지 컴포넌트를 한번에 리턴한 모습이다.

VideoList는 유투브API에서 받아온 영상 데이터를 props로 가지고 있고

map을 이용하여

videos들의 리스트를 차례로 가져왔다.

이때 return값으로 <videoListItem />컴포넌트를 가져오고

다섯개의 video데이터 내용을

이 컴포넌트의 속성으로 담았다.

key같은 경우에는 .. 음.. 그냥 map을 사용할 때 기본키 같은게 필요한가 보다.