7 React 리스트와 Key 완벽 정리: 배열을 활용한 동적 리스트 렌더링

 React에서 리스트(List)와 Key는 컴포넌트가 여러 개의 요소를 효율적으로 렌더링할 때 꼭 필요한 개념입니다. 배열 데이터를 화면에 표시하거나 동적으로 업데이트하는 경우 리스트를 사용하며, 각 항목에는 고유한 key 값을 지정해야 합니다.

이번 글에서는 React에서 리스트를 다루는 방법과 Key의 역할 및 중요성을 초보자도 쉽게 이해할 수 있도록 설명하겠습니다.

주요 키워드: React 리스트, 배열 렌더링, 동적 리스트, Key의 중요성, React map 함수

---

1. React에서 리스트(List)란?

리스트(List)는 여러 개의 데이터를 배열(Array) 형태로 저장하고, 이를 화면에 나열하는 구조입니다.
예를 들어, 쇼핑몰에서 상품 목록을 표시하거나, 댓글 목록을 출력할 때 리스트가 사용됩니다.

JSX에서는 map() 함수를 이용하여 배열 데이터를 리스트로 변환할 수 있습니다.

const fruits = [' 사과', ' 바나나', ' 포도'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

export default FruitList;

설명:

• fruits 배열을 map() 함수로 반복하여 <li> 요소를 생성합니다.
• 각 요소에 key 속성을 부여하여 React가 개별 항목을 구별할 수 있도록 합니다.

리스트 렌더링을 위해 map() 함수 사용이 필수적입니다.

 

---

2. 배열을 활용한 동적 리스트 렌더링

동적 리스트는 사용자가 입력한 데이터를 기반으로 실시간으로 변경됩니다.

예제: 사용자 입력을 받아 리스트 추가하기

import React, { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState('');

  const addTask = () => {
    if (input.trim() === '') return;
    setTasks([...tasks, input]);
    setInput('');
  };

  return (
    <div>
      <h2>할 일 목록</h2>
      <input 
        type="text" 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
        placeholder="할 일을 입력하세요" 
      />
      <button onClick={addTask}>추가</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

설명:

• useState를 사용하여 할 일 목록(tasks)을 관리합니다.
• 사용자가 입력하면 setTasks([...tasks, input])으로 새로운 항목을 추가합니다.
• map()을 이용해 tasks 배열을 리스트로 변환하고 화면에 표시합니다.

---

3. Key의 역할과 중요성

React에서 key는 각 리스트 아이템을 고유하게 식별하는 역할을 합니다.
리스트가 변경될 때 React는 key 값을 기준으로 업데이트할 항목을 결정합니다.

예제: key를 사용하지 않은 경우

const items = ['React', 'Vue', 'Angular'];

function FrameworkList() {
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li> //  key가 없음
      ))}
    </ul>
  );
}

경고 메시지:

Warning: Each child in a list should have a unique "key" prop.

위 코드에서는 key 속성이 없어 React가 리스트를 효율적으로 관리하지 못합니다.

올바른 key 사용법

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

하지만 index를 key로 사용하는 것은 최선의 방법이 아닙니다.
배열이 변경되면 React가 비효율적인 렌더링을 수행할 수 있기 때문입니다.

4. key를 index가 아닌 고유한 값으로 설정하기

React 공식 문서에서는 리스트의 key로 고유한 ID 값을 사용하는 것이 좋다고 설명합니다.
아래 예제처럼 각 항목이 고유한 id 값을 가진다면 index 대신 id를 key로 설정하는 것이 좋습니다.

const users = [
  { id: 1, name: '철수' },
  { id: 2, name: '영희' },
  { id: 3, name: '민수' },
];

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

key를 설정할 때 주의할 점

1. 가능하면 고유한 ID 사용 (id, UUID 등)
2. 리스트가 자주 변경되는 경우 index 사용 지양
3. key 값이 변경되면 불필요한 리렌더링이 발생할 수 있음

---

5. 리스트와 Key를 활용한 실전 예제

예제: 고유한 ID를 가진 동적 리스트

import React, { useState } from 'react';

function ShoppingList() {
  const [items, setItems] = useState([]);
  const [input, setInput] = useState('');

  const addItem = () => {
    if (input.trim() === '') return;
    const newItem = { id: Date.now(), name: input };
    setItems([...items, newItem]);
    setInput('');
  };

  return (
    <div>
      <h2>장바구니</h2>
      <input 
        type="text" 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
        placeholder="상품명을 입력하세요" 
      />
      <button onClick={addItem}>추가</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ShoppingList;

설명:

• 각 항목이 id: Date.now()를 가지므로 중복되지 않는 key를 설정할 수 있습니다.
• 동적으로 리스트를 추가해도 React가 효율적으로 렌더링합니다.

---

6. 결론

React에서 리스트와 Key는 동적 데이터를 효율적으로 렌더링하기 위해 필수적인 개념입니다.
정리하면 다음과 같습니다.

map()을 사용하여 리스트를 JSX로 변환
리스트의 각 항목에는 key를 설정해야 함
가능하면 id 등 고유한 값을 key로 사용
리스트 변경이 잦다면 index를 key로 사용하지 않기

React 프로젝트에서 올바른 리스트 렌더링과 Key 설정을 통해 최적화된 UI를 만들어 보세요!