# 글을 시작하며 React 개발을 하다 보면 반드시 마주치게 되는 경고 메시지가 있습니다. 바로 **"Warning: Each child in a list should have a unique 'key' prop."** 입니다. 단순히 경고를 없애기 위해 key를 넣는 것이 아닌, **왜 key가 필요한지** 그리고 어떻게 사용해야 하는지 자세히 알아보려 합니다. # key가 필요한 이유 ## Virtual DOM의 비교 과정 최적화 React는 Virtual DOM을 사용하여 실제 DOM 업데이트를 최적화합니다. 이 과정에서 key는 매우 중요한 역할을 합니다. **재조정 과정**은 이전 가상 DOM 트리와 새로운 가상 DOM 트리를 비교하여 **변경된 부분만 실제 DOM에 반영**하는 과정입니다. 이는 최소한의 변경 사항만 파악하고 실제 DOM에 반영하기 위함입니다. **key는 각 리스트 항목을 고유하게 식별하는데 사용**되며, 어떤 항목이 변경되었는지 빠르게 추적할 수 있습니다. 이를 통해 변경된 부분만 업데이트 하므로 **재조정 과정을 효율적으로 수행**할 수 있습니다. ```jsx // key가 없는 경우

사과
바나나

// 맨 앞에 '포도' 추가 시

포도
사과
바나나

``` key가 없다면, React는 모든 li 요소가 변경되었다고 판단하여 불필요한 리렌더링이 발생합니다. 1. 첫 번째 요소에서 "사과"와 "포도"가 다르므로 리액트는 첫 번째 요소를 업데이트합니다. 2. 두 번째 요소에서 "바나나"와 "사과"가 다르므로 두 번째 요소를 업데이트합니다. 3. 새로운 요소 "바나나"를 발견하고 DOM에 새 요소를 추가합니다. ```jsx // key를 사용한 경우

사과
바나나
오렌지

// 맨 앞에 '포도' 추가 시

포도
사과
바나나
오렌지

``` **key를 사용**하면 React는 각 요소를 정확히 식별할 수 있어, **새로운 요소만 추가**하고 **나머지는** 그대로 **유지**합니다. 자식 요소의 순서가 바뀌더라도 **key를 통해** React는 **각 요소를 식별**할 수 있습니다. 동일한 타입과 key를 갖는다면 **재조정 과정**에서 비교 작업을 수행할 때 **동일한 요소가 사용된다는 것을 알 수 있기 때문에** 더 **적은 비용**으로 최소한의 변경만 실제 DOM에 반영하고 **연산 작업을 수행**할 수 있습니다. ## 컴포넌트의 상태 유지 key는 컴포넌트의 `identity`를 유지하는 데 중요한 역할을 합니다. ```jsx const TodoList = ({ todos }) => { return (

))}

); }; ``` 각 TodoItem 컴포넌트는 고유한 key를 가짐으로써 각 컴포넌트 인스턴스를 식별하고 추적할 수 있습니다. - 컴포넌트의 local state가 보존 - 불필요한 리렌더링을 방지 - 애니메이션이나 트랜지션이 의도대로 동작 # key 사용 시 주의사항 ## index를 key로 사용하지 말 것 ```jsx // ❌ 잘못된 사용 { todos.map((todo, index) => ( )); } // ✅ 올바른 사용 { todos.map((todo) => ( )); } ``` **index를 key로 사용하면** - 항목 **순서가 바뀌거나** 중간에 항목이 **삽입/삭제될 때 index로 지정한 key도 변경되기 때문에 문제가 발생** - 그 결과, 항목을 올바르게 추적하지 못하게 되고 의도하지 않은 방식으로 동작할 수 있음 > key를 지정하지 않으면 React는 기본적으로 index를 key로 사용합니다. 항목들이 재배열되지 않고 상태를 갖지 않는다면 정상 작동할 수 있습니다. ## 고유하고 안정적인 key 사용하기 ```jsx // ❌ 잘못된 사용 // ✅ 올바른 사용 ``` Math.random()을 키로 사용하면 매 렌더링마다 새로운 key가 생성되기 때문에 고유한 값이 공유되지도 않을뿐더러 예측할 수도 없습니다. React는 매번 해당 자식 요소들을 새로운 요소로 간주하게 되어 불필요한 리렌더링이 발생할 수 있습니다. 따라서 key는 다음과 같은 조건을 충족해야 합니다. - 형제 요소 사이에서 고유해야 함 - 렌더링이 일어나도 변하지 않아야 함 - 예측 가능해야 함 # 결론 key prop은 단순한 React 경고 메시지를 없애기 위한 것이 아니며 React 애플리케이션의 성능과 정확성을 보장하는 중요한 요소입니다. 올바른 key 사용은 다음과 같은 이점을 제공합니다. - Virtual DOM 비교 과정을 최적화 - 컴포넌트의 상태를 올바르게 유지 - 불필요한 리렌더링 방지
참고 자료 - [Rendering Lists](https://react.dev/learn/rendering-lists) - [Preserving and Resetting State](https://react.dev/learn/preserving-and-resetting-state)