key 로 풀어내는 React 렌더링 퍼즐

nonekey

React 개발을 하면서 위의 경고를 마주치지 않은 개발자가 과연 있을까요? 데이터를 렌더링되지만, 개발자 도구에서는 이 경고가 눈에 띄게 표시됩니다. 이러한 경고는 단순한 추천 사항이 아니라, React의 핵심 원칙 중 하나를 반영합니다. 그렇다면 왜 이러한 리스트 아이템에 key를 요구하는 것 일까요?

왜 React는 key를 요구할까요?

React는 효율적인 UI 업데이트를 위해 가상 DOM을 사용합니다. 각 요소에 고유한 key 를 부여함으로써, React는 어떤 요소가 변경, 추가 똔또는 삭제 되어야 하는지를 빠르게 식별할 수 있습니다. 이는 리렌더링을 최소화하여 성능을 개선하는 데 중요합니다.

그럼 key 없이 코드를 작성한다면 어떻게 될까요?

key 가 없으면 React는 각 요소를 독립적으로 식별할 수 없습니다. 이로 인해 배열의 요소가 업데이트 되거나 재정렬될 때, React에서 어떤 요소가 변했느지 파악하기 어려워 결국 전체 리스트를 재생성해야 할 수 있습니다. 이는 후에 성능 저하로 이어집니다.

 

하지만 key를 추가한다면, 동일한 데이터를 다시 렌더링할 필요가 없기 때문에 웹 애플리케이션의 성능이 향상됩니다. 특히 대량의 데이터를 다룰 때 이 차이는 더욱 두드러집니다.

가상 DOM과 diff 알고리즘?

React는 가상 DOM(Virtual DOM)을 통해 실제 DOM과의 차이를 계산합니다. key는 이 diff 계산에서 중요한 역할을 하며, 가상 DOM 내에 요소들이 서로 어떻게 관련되어 있는지 React 에서 계산하는데 도움을 줍니다.

다양한 데이터 유형과 key

key는 문자열이나 숫자 등 어떠한 형태의 데이터라도 될 수 있지만, 각 요소마다 고유해야 합니다. 리스트의 각 요소가 고유한 식별자를 갖기 않으면, React에서는 올바른 요소에 대한 업데이트를 보장할 수 없습니다.

결론

React에서의 key prop의 중요성은 단순한 성능 최적화를 넘어서, 애플리케이션의 안정성과 예측 가능성을 높이는 핵심 요소 입니다. 올바른 key 값을 사용함으로써 리렌더링 가능성을 줄이면서 반응속도를 높일 수 있습니다. 

제 생각에도 key가 없다면 개선된 방식인 Virtual DOM의 사용이 무의미해지는 것 같습니다. 이는 어떠한 요소가 수정되면 key가 없어서 분명 전체 렌더가 다시 될것이기 때문에 기존 DOM방식과 다를게 없다고 생각합니다. 따라서 React에서 사용한 개발을 할 때는 항상 각 리스트 요소에 고유한 key를 부여하는 것을 항상 생각하고 있어야 합니다.