리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.
-
리액트(React)에서 가상 DOM(Virtual DOM)은 실제 DOM(Document Object Model)을 추상화한 가벼운 복제본입니다. 가상 DOM은 메모리 상에 존재하며, 실제 DOM과 유사한 구조를 갖습니다.
리액트에서 가상 DOM을 사용하는 이유는 다음과 같습니다:
-
성능 최적화: 실제 DOM 조작은 비용이 많이 드는 작업입니다. 요소를 추가, 수정 또는 삭제할 때마다 브라우저는 리플로우(reflow)와 리렌더링(repainting)을 수행하여 화면을 업데이트합니다. 이러한 작업은 성능 저하의 원인이 될 수 있습니다. 가상 DOM은 변경된 부분만 선택적으로 실제 DOM에 반영함으로써 리플로우와 리렌더링 비용을 최소화할 수 있습니다. 변경 사항을 추적하고 필요한 경우에만 최소한의 실제 DOM 조작을 수행하여 성능 향상을 도모합니다.
-
단방향 데이터 흐름: 리액트는 단방향 데이터 흐름(One-way data flow) 아키텍처를 지원합니다. 상태(state)의 변화에 따라 UI가 업데이트되어야 하는데, 이를 관리하기 위해 가상 DOM이 사용됩니다. 상태 변화가 발생하면 새로운 가상 DOM 트리가 생성되고, 이전 버전의 가상 DOM 트리와 비교하여 변경된 부분만 찾아내어 업데이트됩니다. 이러한 방식으로 UI 컴포넌트들이 항상 일관된 상태를 유지할 수 있도록 도와줍니다.
-
추상화 계층: 가상 DOM은 개발자들에게 추상화된 인터페이스를 제공합니다. 개발자들은 직접적인 실제DOM 조작보다는 추론 가능하고 예측 가능한 방식으로 UI를 구성하고 관리할 수 있습니다. 개발자들은 컴포넌트 기반 접근법과 JSX(JSX: JavaScript XML) 문법 등 React의 선언적 스타일로 UI를 작성함으로써 코드의 유지보수성과 재사용성을 높일 수 있습니다.
-
크로스 플랫폼 호환: 가상DOM은 브라우저 환경뿐만 아니라 서버 사이드 렌더링(Server-side Rendering), 네이티브 앱(Native App), VR/AR 애플리케이션 등 다양한 환경에서도 사용될 수 있는 크로스 플랫폼 호환 기능을 제공합니다. React Native와 같은 프레임워크에서도 공유 코드 베이스 및 일관된 개발 경험을 제공하기 위해 React의 가상DOM 기능이 사용됩니다.
따라서, 리액트에서 Virtual Dom(Virtual Document Object Model) 을 사용하는 주요 목적은 성능 최적화 및 단방항 데이터 흐름 구현 등입니다.
리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.
- 리액트에서 배열을 렌더링할 때 key 속성을 사용하는 이유는 다음과 같습니다:
-
요소 식별: key 속성은 각각의 배열 요소를 고유하게 식별하는 역할을 합니다. 리액트는 key 값을 사용하여 각 요소를 추적하고 업데이트 시에 효율적으로 재사용하거나 추가, 수정, 삭제합니다.
-
재렌더링 최적화: 배열의 요소가 변경되었을 때, 리액트는 key 값을 기반으로 변경된 부분만 업데이트합니다. 만약 key가 제공되지 않으면 리액트는 기본적으로 인덱스(index)를 사용하여 요소를 추적합니다. 그러나 인덱스만으로 요소를 식별하는 경우 문제가 발생할 수 있습니다. 예를 들어, 배열에서 요소의 순서가 변경되면 인덱스는 변하지 않지만 실제로 순서가 바뀐 것이므로 잘못된 컴포넌트들이 재사용될 수 있습니다. 이러한 문제를 방지하기 위해 고유한 key 값을 제공해야 합니다.
-
성능 개선: 효율적인 업데이트와 재사용은 성능 향상에 기여합니다. 올바른 key 값이 제공되면 리액트는 변경된 부분만 처리하고 나머지 부분은 건너뛰므로 불필요한 DOM 조작과 랜더링 비용을 줄일 수 있습니다. 반면에 올바르지 않거나 유니크하지 않은 key 값이 제공되면 리액트는 비효율적인 전체 재랜더링이 발생할 수 있으며 성능 저하의 원인이 됩니다.
-
경고 방지: React 개발자 도구 및 콘솔에서 경고 메시지가 출력됩니다. 경고 메시지에서는 각각의 배열 요소에 고유한 key 속성을 제공해야 한다는 내용입니다.
따라서, 배열을 렌더링할 때 올바른 고유한 key 값을 제공함으로써 성능 최적화와 정확한 동작 보장 등 다양한 이점을 얻을 수 있습니다.
