리스트 컴포넌트 key 추가하기

 

1. 키가 없는 기본적인 리스트 컴포넌트

import React from "react";

function ListItem({ item }) {
  return <li>{item}</li>;
}

function List() {
  const items = ["Apple", "Banana", "Orange", "Grapes"];

  return (
    <ul>
      {items.map((item) => (
        <ListItem item={item} />
      ))}
    </ul>
  );
}

export default List;

 

이 코드는 items 배열을 map()메서드로 순회하면서 각 항목을 ListItem컴포넌트로 변환한다.

하지만 이 상태에서는 key 속성이 없기 때문에, 리액트는 항목들을 구분할 수 없어, 변경된 항목을 효율적으로 처리할 수 없다.

 

---

 

2. key를 추가한 리스트 컴포넌트

import React from "react";

function ListItem({ item }) {
  return <li>{item}</li>;
}

function List() {
  const items = ["Apple", "Banana", "Orange", "Grapes"];

  return (
    <ul>
      {items.map((item, index) => (
        <ListItem key={index} item={item} />
      ))}
    </ul>
  );
}

export default List;

 

key={index}를 추가하여 각 항목에 고유한 key를 부여했다.

이 경우 key는 map()함수에서 순서대로 할당된 index값으로 사용되었다. 하지만 일반적으로 index를 key로 사용하는 것은 항목의 순서가 변하지 않는 경우에만 적합하다.

key속성 덕분에 리액트는 각 항목을 효율적으로 식별하고, 상태가 변경될 때 렌더링을 최적화할 수 있다.

---

 

3. key로 고유 ID를 사용하는 리스트 컴포넌트

import React from "react";

function ListItem({ item }) {
  return <li>{item.name}</li>;
}

function List() {
  const items = [
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" },
    { id: 3, name: "Orange" },
    { id: 4, name: "Grapes" },
  ];

  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

export default List;

 

고유한ID(item.id)를 key로 사용한다. key 속성에 ID를 사용하는 것이 더 일반적이고, 항목의 순서가 바뀌거나 삭제될 때도 리액트가 효율적으로 변경 사항을 추적할 수 있다.

이렇게 하면 리액트가 리스트의 항목을 효율적으로 관리하고, 최적화된 렌더링을 할 수 있다.