3. 리액트의 리스트 렌더링에서 key 필요한 이유, key 값이 유니크해야 하는 이유
- 답변)
- 의도 : 자칫 지나치기 쉬운 리액트의 기본 개념 확인
- 모범 답안 : 리스트 렌더링에서 key 속성은 리액트가 각 요소를 식별하는 데에 사용되는 값. 이 key가 있어야 리액트는 가상 돔에서 어떤 요소가 어디에 있고, 어떻게 순서가 바뀌었는지 등의 순서와 변화를 제대로 감지 가능. 그래서 통상적으로 유니크한 id 값을 key에 할당한다.
key 사용 이유
React는 가상 DOM(Virtual DOM)을 기반으로 렌더링을 최적화한다. 이 과정에서 리스트의 변경 사항(추가, 삭제, 순서 변경 등)을 감지해야 하는데, key 속성이 이를 돕는다.
key가 없으면 React는 리스트의 모든 요소를 다시 렌더링할 수밖에 없다.
key가 있으면 요소들의 변경 사항을 정확하게 파악하고, 필요한 부분만 업데이트한다.
key가 유니크해야 하는 이유
React는 key 값을 기준으로 요소를 비교하여 재사용하거나 업데이트 여부를 결정. 중복된 key가 있으면 React는 어떤 요소를 변경해야 할지 혼란스러워져, 예측 불가능한 동작이 발생할 수 있다.
예시
key를 사용하지 않은 경우
리스트 렌더링에서 key를 사용하지 않으면 React는 비효율적으로 동작.
🖥️ jsx
import React from "react";
function ItemList() {
const items = ["사과", "바나나", "체리"];
return (
<ul>
{items.map((item) => (
<li>{item}</li> // key 속성이 없음
))}
</ul>
);
}
export default ItemList;React는 각 <li> 요소를 고유하게 식별할 수 없어 효율적인 업데이트 불가.
key를 사용한 경우 (권장 방법)
리스트에 key 속성을 추가하면 React는 각 요소를 고유하게 식별하여 성능 최적화.
🖥️ jsx
import React from "react";
function ItemList() {
const items = [
{ id: 1, name: "사과" },
{ id: 2, name: "바나나" },
{ id: 3, name: "체리" },
];
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li> // key 속성에 유니크한 id 사용
))}
</ul>
);
}
export default ItemList;
// 출력 결과
// 사과
// 바나나
// 체리-
key를 사용한 경우
: React는 각 id를 기준으로 요소를 추적한다. 예를 들어, 배열에서 순서가 변경되거나 삭제될 때 React는 key를 기준으로 변경된 부분만 업데이트합니다. -
key가 없거나 중복된 경우
: React는 모든 리스트 요소를 다시 렌더링하게 됩니다.
잘못된 key 사용 예시
인덱스를 key로 사용하는 방법도 가능하지만, 권장되지 않는다.
🖥️ jsx
<li key={index}>{item.name}</li>리스트의 순서가 바뀌거나 요소가 추가/삭제될 때 인덱스는 달라질 수 있어
리액트의 효율적 업데이트에 방해가 될 수 있다.
