[Week 6-2] 리액트에서 배열을 랜더링할 때 key를 써야하는 이유

리액트에서 배열을 렌더링할 때 key를 써야 하는 이유

---

서론

리액트(React)는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 컴포넌트 기반 아키텍처를 통해 재사용성과 유지보수성을 높입니다. 리액트에서 배열을 렌더링할 때는 각 항목에 고유한 key 속성을 부여해야 한다는 점이 매우 중요합니다. 이 글에서는 key 속성을 사용하는 이유와 그 중요성에 대해 자세히 설명하겠습니다.

---

리액트에서 key의 역할

리액트는 가상 DOM(Virtual DOM)을 사용하여 UI의 변화를 효율적으로 관리합니다. 가상 DOM은 실제 DOM의 가벼운 복사본으로, 상태 변화가 발생할 때마다 리액트는 가상 DOM을 업데이트하고, 실제 DOM과 비교(diff)하여 최소한의 변경만을 실제 DOM에 적용합니다.

key는 이 과정에서 중요한 역할을 합니다. key는 리액트가 각 항목을 고유하게 식별할 수 있도록 도와주며, 변경, 추가, 제거 등의 변화를 효율적으로 감지하고 처리할 수 있게 합니다.

---

key를 사용하는 이유

1. 효율적인 업데이트

   • 리액트는 key를 사용하여 어떤 항목이 변경, 추가 또는 제거되었는지 빠르게 파악할 수 있습니다. key가 없으면 리액트는 배열의 모든 항목을 순차적으로 비교해야 하므로, 성능이 저하됩니다.

2. 정확한 컴포넌트 상태 유지

   • key를 사용하면 리액트는 각 항목의 컴포넌트 상태를 정확히 유지할 수 있습니다. 예를 들어, 리스트 항목에 입력 필드가 있는 경우, key가 없으면 항목이 변경될 때 입력 필드의 내용이 초기화될 수 있습니다. key를 사용하면 각 항목의 상태가 독립적으로 유지됩니다.

3. 예측 가능한 동작

   • key는 컴포넌트가 예측 가능한 방식으로 동작하도록 보장합니다. 항목이 추가되거나 삭제될 때, key가 있으면 항목의 순서가 바뀌어도 각 항목의 식별이 명확하므로, 불필요한 리렌더링을 방지할 수 있습니다.

---

잘못된 key 사용의 문제점

key를 잘못 사용하면 리액트의 효율적인 렌더링이 방해받을 수 있습니다. 다음은 일반적인 실수와 그로 인한 문제점입니다:

1. 인덱스를 key로 사용

   const items = ['Apple', 'Banana', 'Cherry'];
   items.map((item, index) => <li key={index}>{item}</li>);

   • 문제점: 배열의 순서가 변경되면 리액트는 각 항목을 고유하게 식별하지 못합니다. 이는 리스트 항목의 상태가 의도치 않게 초기화되거나, 불필요한 리렌더링을 유발할 수 있습니다.

2. 중복된 key 사용

   const items = [{ id: 1, name: 'Apple' }, { id: 1, name: 'Banana' }];
   items.map(item => <li key={item.id}>{item.name}</li>);

   • 문제점: key는 배열 내에서 고유해야 합니다. 중복된 key를 사용하면 리액트는 어떤 항목이 변경되었는지 정확히 파악하지 못하여, 예기치 않은 동작을 초래할 수 있습니다.

---

올바른 key 사용 방법

1. 고유한 식별자 사용

   const items = [{ id: 'a1', name: 'Apple' }, { id: 'b2', name: 'Banana' }];
   items.map(item => <li key={item.id}>{item.name}</li>);

   • 설명: 각 항목에 고유한 식별자를 key로 사용하면, 리액트는 항목의 변경 사항을 정확히 추적할 수 있습니다.

2. 고유성이 보장된 값 사용

   const items = ['Apple', 'Banana', 'Cherry'];
   items.map(item => <li key={item}>{item}</li>);

   • 설명: 배열의 각 값이 고유하다면, 해당 값을 key로 사용할 수 있습니다.

---

결론

리액트에서 배열을 렌더링할 때 key를 사용하는 이유는 효율적이고 정확한 UI 업데이트를 위해서입니다. key는 리액트가 각 항목을 고유하게 식별하고, 변경 사항을 빠르게 감지하며, 컴포넌트 상태를 정확히 유지하는 데 필수적인 역할을 합니다. 따라서 key를 올바르게 사용하여 리액트 애플리케이션의 성능과 안정성을 높이는 것이 중요합니다.

이를 통해 리액트 애플리케이션은 보다 예측 가능하고 효율적인 방식으로 동작할 수 있습니다. key의 중요성을 이해하고 적절히 사용함으로써, 개발자는 최적화된 사용자 경험을 제공할 수 있습니다.