여러 개의 Component 렌더링 하기, map(), List의 key

map() : 배열에 들어 있는 각 변수에 어떤 처리를 한 뒤, 리턴하는 것

배열에 첫번째 순서대로 각 아이템에 어떠한 연산을 진행 하고 배열로 배출시킴

 

기본적인 List component

 

List의 key -> 아이템을 구분하기 위한 고유한 문자열

- 변경 추가 제거되었는지 확인하기 위해 사용함

- 특정 범위에서만 고유하면 됌(같은 list에 있는 element 사이에서만)

 

다양한 key값 만들기

const numbers = [1,2,3,4,5]
const listItems = numbers.map((number) =>
	<li key={number.toString()}>
		{number}
    </li>    
); 
// key로 값을 사용하는 경우 



const todoItems = todos.map((todo) ->
	<li key={todo.id}>
    	{todo.text}
    </li>
); 
// key로 id를 사용하는 경우



const todoItems =todos.map((todo, index) =>
	<li key={index}>
    	{todo.text}
    </li>

);
// key로 index를 사용하는 경우 -> 아이템들의 고유한 ID가 없을 경우에만 사용