[React] 초급 개념6 - 리스트 렌더링과 key 속성

리액트에서 리스트 데이터를 효율적으로 렌더링하려면 리스트 렌더링과 key 속성을 적절히 활용해야 합니다. 여러 개의 요소를 동적으로 생성할 때 map() 함수를 주로 사용합니다.

---

 

 

🔸 1. 리스트 렌더링이란?

 

✅ 배열 데이터를 동적으로 변환하여 여러 개의 컴포넌트를 생성하는 기법

• map() 함수를 사용하여 배열 데이터를 컴포넌트로 변환
• 각 요소마다 고유한 key 속성을 부여해야 성능 최적화 가능

---

 

 

🔸 2. map()을 활용한 리스트 렌더링

리액트에서는 map()을 사용하여 리스트를 동적으로 생성할 수 있습니다.

 

✅ 예제: 간단한 리스트 렌더링

function NameList() {
  const names = ["Alice", "Bob", "Charlie"];
  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

 

📌 설명:

• map()을 사용하여 배열 names를 <li> 요소로 변환
• 각 항목에 key 속성을 부여해야 리액트가 리스트를 효율적으로 업데이트할 수 있음

💡 주의:

• 위 코드에서는 index를 key로 사용했지만, 고유한 ID를 가진 데이터를 사용하는 것이 더 바람직함

---

 

 

🔸 3. key 속성의 중요성

 

✅ key는 리스트의 각 요소를 구별하는 고유 값

• 리스트가 변경될 때 성능 최적화에 도움
• 불필요한 리렌더링 방지

 

 

✅ 예제: ID를 key로 사용한 리스트

function UserList() {
  const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" }
  ];

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

 

📌 설명:

• user.id를 key 값으로 사용하여 리스트를 렌더링
• 리스트가 변경될 때 성능 최적화에 도움을 줌

💡 주의:

• key 값이 중복되지 않도록 주의해야 함
• index를 key로 사용하면 리스트 변경 시 성능 최적화에 불리할 수 있음

---

 

 

🔸 4. 리스트를 동적으로 추가/삭제하기

리스트를 동적으로 추가/삭제할 경우 상태(state)를 활용해야 합니다.

 

 

✅ 예제: 리스트 추가 및 삭제 기능

import { useState } from "react";

function DynamicList() {
  const [items, setItems] = useState(["Item 1", "Item 2"]);

  function addItem() {
    setItems([...items, `Item ${items.length + 1}`]);
  }

  function removeItem(index) {
    setItems(items.filter((_, i) => i !== index));
  }

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item} <button onClick={() => removeItem(index)}>삭제</button>
          </li>
        ))}
      </ul>
      <button onClick={addItem}>추가</button>
    </div>
  );
}

 

📌 설명:

• useState를 활용하여 리스트를 동적으로 관리
• addItem() 함수를 사용하여 새로운 항목 추가
• removeItem() 함수를 사용하여 특정 항목 삭제

💡 주의:

• 리스트가 동적으로 변경되는 경우 index를 key로 사용하면 예상치 못한 UI 업데이트가 발생할 수 있음 → 고유한 ID 사용 추천

---

 

 

🔸 5. 개념 요약

 

✅ map()을 활용하여 리스트를 동적으로 렌더링
✅ key 속성은 고유한 값을 사용하여 리스트 변경 시 최적화
✅ 리스트를 동적으로 추가/삭제할 경우 useState 활용
✅ 고유한 ID가 없다면 index를 key로 사용하지만, 리스트가 변경될 경우 주의 필요

---