React로 반복 렌더링 & 리스트 다루기 – key와 map의 모든 것

React로 반복 렌더링 & 리스트 다루기 – key와 map의 모든 것

---

React 앱에서 가장 많이 하는 일 중 하나는 리스트 데이터를 화면에 출력하는 것입니다.
map()을 사용해 JSX를 반복 렌더링하는 건 기본 중의 기본이지만,
실무에서는 key 설정, 컴포넌트 구조화, 성능 최적화까지 꼼꼼하게 고려해야 합니다.

이번 글에서는 React에서 리스트를 다룰 때 반드시 알아야 할 핵심 개념을
예제와 함께 정리해드립니다.

---

🔁 React에서 리스트 렌더링의 기본 – map()

React에서는 배열을 map()으로 순회하며 JSX를 생성합니다.

✅ 예제: 숫자 리스트 출력

const numbers = [1, 2, 3, 4, 5];

function NumberList() {
  return (
    <ul>
      {numbers.map((n) => (
        <li>{n}</li>
      ))}
    </ul>
  );
}

🔴 주의: 위 코드는 동작하지만 경고 메시지가 뜹니다.
→ “Warning: Each child in a list should have a unique 'key' prop.”

---

🗝 key 속성의 중요성

반응형

key는 React가 리스트 항목을 식별할 수 있게 해주는 고유한 값입니다.
→ 컴포넌트가 업데이트될 때 어떤 항목이 변경/추가/삭제되었는지 판단하는 데 사용됩니다.

✅ 잘못된 예

numbers.map((n) => <li>{n}</li>); // ❌ key 없음

✅ 올바른 예

numbers.map((n) => <li key={n}>{n}</li>);

❗ key로 절대 사용하면 안 되는 것

• 배열의 인덱스 (map((item, index) => <li key={index}>)
  → 순서가 바뀌거나 삭제될 때 버그 발생 가능

---

🧱 실전 예제: 사용자 목록 출력

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

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

✅ 데이터베이스에서 가져온 고유 ID 값을 key로 사용하는 것이 가장 안전합니다.

---

🔄 key가 잘못되었을 때 생기는 문제

• 입력값이 리셋되거나, 포커스가 풀리는 현상
• 불필요한 컴포넌트 언마운트/마운트 발생
• React의 diff 알고리즘 효율이 떨어짐

// 잘못된 key 사용 예: index
items.map((item, index) => (
  <input key={index} defaultValue={item.value} />
));

→ 입력 도중 항목이 추가되면 포커스 사라짐 / 값 초기화 버그 발생 가능

---

💡 반복 렌더링을 컴포넌트로 분리하는 패턴

function User({ user }) {
  return <li>{user.name}</li>;
}

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

✅ 컴포넌트 단위로 분리하면 유지보수, 재사용, 테스트 모두 쉬워집니다.

---

🧠 오늘의 요약

개념 설명

map()	리스트를 반복 렌더링할 때 사용하는 함수
key	각 항목을 고유하게 식별하기 위한 필수 prop
좋은 key	고유한 ID 값 (예: DB의 id)
나쁜 key	index 값, 랜덤 값 (불안정함)
컴포넌트 분리	리스트 아이템을 별도 컴포넌트로 분리하면 좋음

---

🧪 실습 과제

1. 이름과 나이를 가진 사용자 리스트를 출력하는 컴포넌트를 만들어보세요.
2. key를 index로 사용했을 때 발생하는 문제를 직접 실험해보세요.
3. 컴포넌트 분리 방식으로 UserItem을 따로 만들어보세요.

---

📌 다음 글 예고

👉 조건부 렌더링 완전 가이드 – if문이 아닌 방법

• &&, 삼항 연산자, early return 사용법
• 렌더링 조건 분기 실전 패턴
• undefined 렌더링 방지 꿀팁

---

 

React 리스트 렌더링, React map 함수, React key 속성, 컴포넌트 반복 렌더링, React 반복 컴포넌트, React key 오류, React 최적화, React 사용자 리스트, 컴포넌트 분리 패턴, React 실전 예제