💗 List

같은 item을 순서대로 모아놓은 것, 배열(자바스크립트의 변수나 객체들을 하나로 묶어 놓은 것)

💗 Key

각 개체나 아이템을 구분할 수 있는 고유한 값으로, 아이템들을 구분하기 위한 고유한 문자열 , 맵 함수 안에서는 key가 필요함!

여러 개의 Component 렌더링 하기

✍ map() : 배열의 각 변수에 어떤 처리를 한 뒤 return

const numbers = [1, 2, 3, 4, 5]
const doubled = numbers.map((number) => number*2);
//map 함수는 각 아이템에 영향을 끼친 후 최종 결과를 배열로 나타내줌

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
	<li>{number}</li>
		);            
ReactDOM.render(
	<ul>{listItems}</ul>
	document.getElementById('root');
)
//화면에 렌더링하기 위해서 감쌈.                       

function NumberList(props){
  const { numbers } = props;
  const listItems = numbers.map(number)=>
  	<li>{number}</li>
  );
  
  return (
    <ul>{listItems}</ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers = {numbers}/>
  document.getElementById('root')
  );
//key가 없음..!!! 
//따라서, 
  
  const listItems = numbers.map(number)=>
  	<li key={number.toString()}>
    	{number}</li>
  );