map함수

하나의 배열을 지정해주자.

const topics = [
		{ id: 1, title: "html", body: "html is..." },
		{ id: 2, title: "css", body: "css is..." },
		{ id: 3, title: "js", body: "js is..." },
	];

이때, title만 리스트 항목으로 만들고 싶다면

 

1. for문 이용하기

const liTag1 = [];
	for (let i = 0; i < topics.length; i++) {
		liTag1.push(
			<li key={topics[i].id}>
				<a href={"/read/" + topics[i].id}>{topics[i].title}</a>
			</li>
		);
	}

 

2. 함수 이용하기

function mapFn({topic}){
    return <li>{topic.title}</li>
  }
const listTag2 = topics.map(mapFn);

 

3. map() 이용하기

const listTag3 = topics.map((topic)=><li key={topic.id}><a href={"/read/"+topic.id}>{topic.title}</a></li>);