리액트를 다루는 기술-6 ( 컴포넌트 반복)

자바스크립트 배열의 map() 함수

• jsx 내부에서 사용할 수 있는 js 반복문 문법?
• 리턴값이 존재하는 반복문은 뭐든 가능 할 듯 (reduce, filter, find 등)
• → 확인 필요함

---

데이터 배열을 컴포넌트 배열로 변환하기

function Component(props) {
	const array = [1,2,3,4]	
	const numberList = array.forEach(number=> <li>{number}</li>)	

	return numberList
}

---

key

• virtual DOM이 업데이트 여부를 쉽게 구분하기 위해서 li 엘리먼트에 key prop을 생성 해야함
• unique한 값이어야 하고 배열의 인덱스는 사용할 수는 있지만 효율적으로 리렌더링 되지 않기 때문에 다른 고유값을 사용하는 것이 좋다
• 인덱스는 배열이 업데이트 될때마다 다른 것을 가지게 되기 때문!!
• function Component(props) { const array = [1,2,3,4] const numberList = array.forEach((number,index)=> <li key={index}>{number}</li>) return numberList }