1️⃣ React가 렌더링을 최적화하는 방식
React는 Virtual DOM을 사용해서 변경된 부분만 렌더링하는 방식을 사용함.
그래서 "이전 상태"와 "새로운 상태"를 비교해서 바뀐 부분만 업데이트하려고 함.
이 비교 과정에서 key가 없으면 어떤 요소가 추가된 건지, 기존 요소가 변경된 건지 React가 헷갈릴 수 있음.
2️⃣ key가 없을 때 React의 리스트 비교 방식
const [items, setItems] = useState(["A", "B", "C"]);
const addItem = () => {
setItems(["X", ...items]); // X를 리스트 앞에 추가
};
return (
<div>
<button onClick={addItem}>Add Item</button>
{items.map((item) => (
<div>{item}</div> // ❌ key 없음
))}
</div>
);✔ X를 리스트 앞에 추가하면 React는 이전 리스트(A, B, C)와 새로운 리스트(X, A, B, C)를 비교해야 함.
✔ 그런데 key가 없으면, React는 요소들이 그대로 유지되는 건지, 새로 추가된 건지 알 방법이 없음.
✔ 그래서 React는 기존 요소(A, B, C)를 삭제하고, 새 리스트(X, A, B, C)를 새로 렌더링할 수도 있음.
3️⃣ key가 있을 때 React의 리스트 비교 방식
{items.map((item) => (
<div key={item}>{item}</div>
))}✔ key가 있으면 React는 각 요소가 어떤 데이터인지 정확하게 식별 가능!
✔ React는 "A", "B", "C"가 그대로 유지되고 "X"만 추가되었다는 걸 이해함.
✔ 기존 요소는 유지하고, 새로 추가된 "X"만 렌더링해서 성능 최적화가 됨.
4️⃣ 더 확실한 비교 예시
🔴 key가 없을 때 React의 문제
// 초기 상태
["A", "B", "C"]
// 새로운 상태 (X 추가됨)
["X", "A", "B", "C"]✔ React는 key가 없어서 "X"가 추가된 건지 "A"가 바뀐 건지 알 수 없음.
✔ 그래서 기존 요소를 삭제하고 새 리스트를 다시 렌더링할 가능성이 높음.
🟢 key가 있을 때 React의 동작
<div key="A">A</div>
<div key="B">B</div>
<div key="C">C</div>
// 새로운 상태
<div key="X">X</div> // 새로운 요소 추가됨!
<div key="A">A</div>
<div key="B">B</div>
<div key="C">C</div>✔ React는 기존 A, B, C가 그대로 있고, X가 새로 추가된 걸 인식함.
✔ 기존 요소는 그대로 유지하면서 X만 추가 → 불필요한 리렌더링 방지
📢 결론
🔹 React는 key를 통해 "이 요소가 기존 요소인지, 새로운 요소인지"를 구별함.
🔹 key가 없으면 React는 리스트의 변경을 제대로 추적하지 못하고 전체를 다시 그릴 수도 있음.
🔹 key가 있으면 변경된 부분만 렌더링해서 성능 최적화가 됨!
💡 ➡ React가 key 없을 때 기존 리스트와 새로운 리스트를 제대로 비교 못 하는 이유는 "각 요소를 유일하게 식별할 기준"이 없기 때문!
