REACT 공식 문서 정리 - 9. 리스트와 Key

9. 리스트와 Key

9.1 map()의 정의

먼저 Javascript에서 리스트를 어떻게 변환 하는지 살펴보자.

아래는 map() 함수를 이용하여 numbers 배열의 값을 두 배로 만든 후 map()에서 반환하는 새 배열 doubled 변수에 할당하고 로그를 확인하는 코드이다.

const numbers = [1, 2, 3, 4, 5]; // 배열 생성
const doubled = numbers.map((number) => number * 2); 
// 배열 횟수만큼 콜백 함수를 호출해서 돌리고 결과를 배열로 반환함.
console.log(doubled); // 출력 결과는 [2, 4, 6, 8, 10]

map()은 배열의 각 요소에 대해 제공된 callback 함수를 순서대로 호출하고 결과로 부터 새 배열을 구성하여 반환함. 값이 할당(undefined 포함) 된 배열의 인덱스에 대해서만 호출된다.

call by value 방식으로 값을 가져온다.

map()에 대해 더 자세히 알고 싶다면 (클릭)

 

9.2 여러개의 컴포넌트 렌더링

9.1에서 배운 map() 사용하면 여러개의 컴포넌트를 렌더링 하기 쉽다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
// 출력은 아래와 같다.
<li>{1}</li>
<li>{2}</li>
<li>{3}</li>
<li>{4}</li>
<li>{5}</li> 

위 코드를 돌려보면 아래와 같은 에러가 뜰 수 있다.

9.4 Key

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

key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야한다.

key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별 할 수 있는 문자열을 사용하는 것이다. 대부분의 경우 id를 key로 사용한다.