[React] 반복문 map 과 key

리액트에서는 반복문을 사용할 때 map 메소드를 사용한다.

• map은 배열의 각 요소에 대해 주어진 함수를 호출하고 그 결과로 새로운 배열을 생성하기 때문에 이를 이용하여 배열의 각 요소를 화면에 표시할 수 있다.
• 리스트나 배열을 랜더링할 때 key값을 넣어야 한다.

왜 key값을 넣어줘야 할까?

• 리액트가 어떤 요소가 변경되었는지 key를 보고 같은 컴포넌트인지 아닌지 판단, 추적하고 효율적으로 랜더링할 수 있도록 도와준다.

예시

import React from 'react';

const MyComponent = () => {
  const data = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <ul>
      {data.map((item, index) => (
        // 각 요소에 고유한 key를 적용
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

• map 함수를 사용하여 data 배열의 각 요소를 <li> 요소로 매핑하고, 각 요소에 key 속성을 index로 적용했다.

• key는 고유한 값이어야 하므로 배열 요소의 id를 사용하거나 index로 사용한다. 하지만 index는 배열의 순서가 바뀌면 값이 바뀌므로 권장하지 않는다.