[프론트엔드] React - Virtual DOM / Reconciliation / Diffing / key

Question :  React Virtual DOM 에 대해 설명하시오

 

Answer :  리액트의 Virtual DOM은 실제 DOM과 동일한 구조를 메모리 상에 가상으로 구현한 것입니다. 이 가상 DOM은 애플리케이션의 UI 상태를 나타내며, 실제 DOM과는 별도로 관리됩니다. 상태 변경 시, 리액트는 가상 DOM과 이전 가상 DOM을 비교(diffing)하여 변경된 부분만을 감지하고, 실제 DOM에 반영합니다. 이를 통해 불필요한 DOM 조작을 최소화하고 성능을 향상시킵니다. 이는 특히 대규모 애플리케이션에서 UI 업데이트의 효율성을 높여줍니다.

 

---

 

Question : Reconciliation 에 대해 설명하시오

 

Answer : Reconciliation(재조정)은 React에서 Virtual DOM을 실제 DOM으로 업데이트할 때 사용되는 프로세스를 가리킵니다. 이 과정에서 React는 이전 상태와 현재 상태를 비교하고, 변경된 부분만을 감지하여 실제 DOM을 업데이트합니다. 이를 통해 성능을 향상시키고 UI 업데이트를 효율적으로 처리할 수 있습니다. Reconciliation은 React의 핵심 개념 중 하나이며, Virtual DOM의 장점을 최대한 활용하여 DOM 조작을 최적화하는 역할을 합니다.

---

 

Question : React 에서 key를 사용하는 이유에 대해 설명하시오

 

Answer : 리액트에서 key가 필요한 이유는 diffing과 관련이 있습니다. diffing은 가상 DOM과 실제 DOM을 비교하여 변경 사항을 찾아내는 과정입니다. 이때 각 요소에는 고유한 식별자가 필요한데, 이것이 바로 key의 역할입니다. key는 각 요소를 식별하고, 동적 데이터 관리와 유일성 보장을 가능케 합니다. 요소가 고유하고 변경되지 않을 때에는 인덱스를 key로 사용할 수도 있습니다.  

 

추가) 만약 key가 없다면 리액트는 요소를 찾아내는 데 어려움을 겪게 됩니다. 이는 성능 저하를 초래할 수 있습니다. 예를 들어, 새로운 요소가 추가되거나 기존 요소가 삭제되었을 때, key가 없으면 리액트는 어떤 요소가 추가되었고 어떤 요소가 삭제되었는지를 정확히 파악하지 못할 수 있습니다. 따라서 키를 사용하여 각 요소를 고유하게 식별함으로써 diffing 과정을 효율적으로 수행할 수 있게 됩니다. 이는 최종적으로 성능 향상에 기여합니다.

---

 

https://ko.legacy.reactjs.org/docs/faq-internals.html#gatsby-focus-wrapper

https://ko.legacy.reactjs.org/docs/reconciliation.html