[React] map

map

react에서 반복문을 쓰는 방법

fruits = [
  {fruit: 'apple', taste: 'sweet'},
  {fruit: 'orange', taste: 'sweet-and-sour'},
  {fruit: 'grapes', taste: 'sour'},
  {fruit: 'strawberry', taste: 'sweet'},
  {fruit: 'watermelon', taste: 'cool'},
];

...

{this.fruits.map( (v, i) => {
	return (
		<li key={v.fruit + v.taste}>{v.fruit} - {v.taste}</li>
	);
})}

• map을 사용할땐 고유한 key값을 반드시 사용해야한다.
• i를 key로 사용하면 후에 성능최적화할때 문제가 될 수 있으므로 쓰지않는 것이 좋다.
  -> react에서는 key를 기준으로 엘리먼트를 추가, 수정, 삭제 판단하기 때문에 배열의 순서가 바뀌면 문제가 생길 여지가 있다.