React에서 map을 사용해야 하는 이유(왜 for문을 사용하지 못할까..?)

그 이유는! React의 Virtual DOM의 작동 방식 때문

Virtual DOM은 이전 상태와 새로운 상태의 차이를 최소화하여 변경 사항만을 업데이트하는 방식으로 동작합니다. 이를 위해 React는 각 요소에 고유한 key 값을 할당하여 변경되지 않은 요소는 이전의 상태를 그대로 유지하면서, 변경된 요소만 업데이트합니다.

for문에서 반복하면서 생성되는 요소들은 각각 고유한 key값을 가지지 않습니다. 따라서 for문을 사용하여 배열을 처리할 경우, Virtual DOM에서 요소를 업데이트할 때 올바르게 처리되지 않을 수 있습니다. 예를 들어, 배열 요소를 추가하거나 삭제할 때 발생하는 인덱스 변경 등으로 인해 변경 사항이 정확하게 반영되지 않을 수 있습니다.

반면에 map() 함수는 배열의 각 요소에 대해 새로운 배열을 반환하며, 이 새로운 배열은 각 요소에 고유한 key값을 가지고 있습니다. 이렇게 key값을 할당하면 Virtual DOM에서 각 요소를 정확하게 추적할 수 있으며, 변경된 요소만을 업데이트하여 최적화된 렌더링을 할 수 있습니다.

그래서 결론은

React에서는 map() 함수를 사용하여 배열 요소를 처리하면, Virtual DOM의 작동 방식과 잘 맞아 떨어지므로, 성능과 렌더링 효율을 높일 수 있습니다.

---

그런데 이때, map의 key값에 index를 줄 경우 성능이 떨어질 수 있습니다.

만약 key 값을 지정하지 않으면 React에서 경고 메시지를 표시하며, 성능에도 영향을 줄 수 있습니다. key 값을 지정하지 않으면, React는 기본적으로 배열의 인덱스를 사용하여 key 값을 생성합니다. 하지만 이 방법은 일부 예외적인 상황을 제외하고는 권장되지 않습니다.

key 값으로 인덱스를 사용하면, 배열 요소의 순서가 변경되는 경우 key 값도 변경되어야 하는데, 이 경우 React는 모든 요소를 다시 렌더링해야 하므로 성능에 영향을 줄 수 있습니다.

따라서 아래와 같이 index가 아닌 고유의 값을 key값으로 주어야 합니다.

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

function ItemList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}