[React.js] 여러 개의 컴포넌트를 쉽게 만들 수 있는 map() 함수

React.js를 배우고서 사용하지 않은 때가 오면 어쩌지 하고 걱정이 앞서는데, Javascript 로 작성되어 있기 때문에 나중에 그런 날이 오더라도 그동안 배우고 사용한 Javascript 지식은 그대로 있으니 안심이다.

 

map()함수는 Javascript의 함수중 하나인데, 이 함수를 통해서 여러 개를 손쉽게 출력할 수 있다.

아래는 React.js에서 map()함수를 사용한 예시이다.

import React from 'react';

function Movie({ title, year, summary, poster, genres }) {
	return(
    	<div className="movie">
        	<ul className="moive__genres">
            	{
                	genres.mapp((genre) => {
                         return <li className="movie__genre">{genre}</li>;   	
                    })
                }
            </ul>
        </div>
    );
}

export default Movie;

map 함수는 해당 인자의 개수만큼 반복하여 돌고, 두번째 매개변수는 해당 인자의 인덱스가 출력된다.