리액트) map() 함수

map() 함수가 중요하기도 하고 지금하고 있는 프로젝트에서 기본이 되는 함수이기 때문에 정확히 

알아 둘 필요가 있다

 

정의:

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

 

map() 의 필요성:

 

예제

fruits = [ 'apple', 'banana', 'kiwhi', 'melon']

//여기서 각 원소 뒤에 '👍' 를 붙이려고 한다
//map() 함수를 사용할 순간이다 

fruits.map(function(fruit) {
	return fruit + "👍" ;
})
["apple👍", "banana👍", "kiwhi👍", "melon👍"]

 

좀 더 나아가 props와 결합해서 사용해보자

 

전체 코드 

import React from 'react';

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

const movieILike = [
{	name: "귀를 기울이면",
    image: "https://pds.joins.com/news/component/joongang_sunday/2007/11/17170109.jpg",
    id: 1
},
{
	name: "원령 공주",
    image: "https://cdn.fanzeel.com/rep/302/5e54bdfc654e1.jpg",
    id: 2
},
{
	name: "붉은 돼지",
    image: "https://t1.daumcdn.net/movie/4d8bd65c928eca3cb6253c6e3aee9afff0dce0ea",
    id: 3
}
];

function App() {
  return( 
    <div>
      {movieILike.map(this => 
        (<Movie key={this.id} name={this.name} picture={this.image} />))}    
    </div>
  );
}

export default App;

{movieILike.map(this => 
        (<Movie key={this.id} name={this.name} picture={this.image} />))
}
        

 this에는 movieILike에 있는 원소들이 하나씩 넘어 온다

따라서 this.name, this.image와 같은 방식으로 컴포넌트에 전달하면 된다.