# Map함수 적용 시 Key props

Map함수

Map함수는 자바스크립트에서 사용하는 고차 함수 중 하나이다.

  const numbers = [1, 2, 3, 4, 5];
  const doubled = numbers.map((number) => number * 2);
  console.log(doubled); // [2, 4, 6, 8, 10]

고차함수(Higher order function)란?

고차 함수는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다.

여러개의 컴포넌트 렌더링 하기

컴포넌트 UI를 렌더링 해주는 리액트에서는 여러 개의 컴포넌트를 렌더링 할 때 사용되기도 한다.

  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );

위와 같은 방식으로 생성 가능하며 컴포넌트를 분리하여 props를 전달받아 props의 갯수

만큼 렌더링하거나, props의 값을 넣어 생성하는 등 다양한 방식으로 컴포넌트를 렌더링 할 수 있다.

하지만 위와 같이 생성할 때 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.

Key props

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도우며 말 그대로

고유한 식별자 역할을 하기 때문에 배열 내부의 엘리먼트에 지정해야 한다.

Key를 선택할 때의 가장 좋은 방법은 데이터의 ID를 key로 사용하는 것이다.

  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );

만약 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있다.

하지만 인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생할 수 있다. 컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용된다. 인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것이다. 그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있습니다.