[React] 리스트와 Key

★ map 함수란? 

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환하는 메서드이다. 

 

예시는 이렇다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

배열을 담고 있는 numbers를 선언한다.

numbers가 배열인가?

 

true이다. numbers 배열이다. 

 

numbers 배열에 두배씩 곱한 새 배열을 만들었다. 그 이름은 바로 doubled.

 

출력 확인.

 

1. props.numbers로 배열을 넘겨받는다.

 

2. listItems는 number에 각각 2씩 곱한 리스트를 만든 것으로 선언한다.

 

3.listItems가 ul로 반환이 될 수 있도록 한다.

 

그런데 각각의 자식 요소가 고유의 key값을 가져야한다고 나한테 경고를 줬다.

 

★ key 값이란? 

key는 React가 어떤 항목을 변경,추가 또는 삭제할지 식별하는 것을 돕습니다.

 

완성!