리액트 map 함수 - 컴포넌트 반복

const list = ['리스트1', '리스트2', '리스트3', '리스트4']

list 변수 안에 담긴 4개의 값을 화면에 보여줄 때 어떻게 보여줄까?

 

<div>리스트1</div>
<div>리스트2</div>
<div>리스트3</div>
<div>리스트4</div>

지금은 list 변수 안의 4개의 값만 보여주지만, 개수가 많아지면 우리는 이런 방식으로 코드 작성하는 것을 원하지 않을 것이다...

 

이럴 때 map 함수를 사용하면 value 를 반복하여 보여줄 수 있다.

import React from "react";

const List = () => {

	const list = ['리스트1', '리스트2', '리스트3', '리스트4']

    const showList = list.map((value, index) => {
        return <p key={`list_${index}`}>{value}</p>
    })
    
	return (
    	<div>
        	{showList}
        </div>
    )
}

export default List;