[Weekly Paper] Virtual DOM이란?

1️⃣ React에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

 

Virtual DOM란?

Virtual DOM(Virtual Document Object Model)은 실제 DOM을 조작하기 전에 그 변경 사항을 메모리상에 시뮬레이션하는 가상화된 객체입니다. 주로 React 같은 프레임워크에서 사용되며, 실제 DOM과 동기화 작업을 효율적으로 처리하여 성능 개선하는 데 도움을 줍니다.

 

Virtual DOM의 작동 방식

 

1. 변경 사항 추적

상태가 업데이트되면, Virtual DOM이 새로운 Virtual DOM 트리를 생성하여 변경된 부분을 추적합니다.

 

2. 차이 계산(Diffing)

이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 어떤 요소가 변경되었는지 파악합니다.

 

3. 패치(Patching)

변경된 부분만 실제 DOM에 반영합니다. 이를 통해 전체 DOM을 다시 그리는 대신 필요한 부분만 업데이트하여 효율성을 높입니다.

 

Virtual DOM의 장점

• 효율성 : 실제 DOM에 바로 접근하여 변경하면 브라우저가 많은 연산을 처리해야 하므로 속도가 느려질 수 있습니다. Virtual DOM은 메모리에서 변경 사항을 미리 계산하고 필요한 부분만 반영하므로 성능이 향상됩니다.
• 예측 가능성 : Virtual DOM은 상태 변화에 따른 DOM 업데이트를 예측 가능하게 만들어, 개발자가 변경 사항을 쉽게 이해하고 추적할 수 있게 합니다.
• 크로스 플랫폼 호환성 : Virtual DOM은 메모리 내에서 작동하므로, 모바일과 웹 등 다양한 플랫폼에서 일관되게 동작할 수 있습니다.

 

Virtual DOM 사용 이유

1. DOM 조작의 비용 절감

DOM 변경 시 브라우저이 렌더링 작업이 필요하기 때문에, Virtual DOM을 통해 변경 사항을 미리 메모리상에서 계산하면 성능이 개선됩니다.

 

2. 효율적인 업데이트

Virtual DOM은 상태가 변경될 때마다 전체 DOM을 재렌더링하지 않고, 변경된 부분만 계산하여 적용하기 때문에 페이지가 빠르고 부드럽게 동작합니다.

 

3. 개발의 간편화

Virtual DOM은 상태 관리에 따라 DOM을 자동으로 업데이트하므로, 개발자는 복잡한 DOM 조작을 직접 처리할 필요 없이 직관적으로 개발할 수 있습니다.

---

2️⃣ React에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.

React에서 배열을 렌더링할 때 key 속성을 사용하는 이유는, 각 항목을 고유하게 식별하기 위해서 사용됩니다. key는 React가 배열 항목을 효율적으로 업데이트하고, 재렌더링 시 DOM 변경을 최소화하는 데 중요한 역할을 합니다.

 

key가 필요한 이유

1. 변경 사항 추적

React는 key를 사용하여 배열 내 각 요소를 고유하게 식별합니다. 배열이 변경될 때 key를 통해 어떤 요소가 추가되거나 삭제되었는지를 쉽게 파악할 수 있어 효율적인 업데이트가 가능합니다.

 

2. 재사용 최적화

동일한 key를 가진 요소는 재사용되어, 불편한 DOM 조작을 줄여줍니다. 반대로 key가 없거나 중복되면, React가 모든 요소를 새로 생성하거나 다시 그리게 되어 성능이 저하될 수 있습니다.

 

3. 정확한 상태 유지

key를 통해 React는 각 요소의 상태를 정확히 추적할 수 있습니다. 예를 들어, 항목이 추가되거나 삭제되더라도 각 항목의 상태가 일관되게 유지됩니다.