리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

: 먼저 브라우저의 렌더링 과정은 크게 아래와 같이 나눌 수 있음 (Critical Rendering Path과정이라고 함)

1. HTML, CSS를 DOM과 CSSOM으로 변환
2. Render tree 생성
3. Layout 진행
4. Painting 진행

그런데 만약 자바스크립트를 이용해서 DOM을 수정하게 되면 브라우저가 수정을 감지하고 위와 같은 CRP과정을 처음부터 다시 진행하게 됨

이 때, 레이아웃과 페인팅과정을 다시 하는것을 reflow, repaint라고 부르는데 reflow, repaint를 많이 진행하면 성능이 굉장히 악화되고 심할 경우 브라우저가 마비될 수 도 있음

그래서 리액트는 업데이트 과정을 효율적으로 진행하기 위해 virtual DOM을 이용해서 내부적으로 동시에 발생한 업데이트를 모아서 처리해 줌.

virtual DOM

DOM을 자바스크립트 객체로 만든 일종의 가상 돔으로 React는 업데이트가 발생하면 실제 DOM(Actual DOM)을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영해 보고, 실제 돔과 비교해서 바뀐 부분들만 업데이트 하는 방식으로 효율적인 업데이트를 진행함

리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.

리액트에서 배열을 렌더링 할 때 key prop를 사용하는 이유는 효율적인 배열 처리를 위해서임

key는 각 항목을 식별하는 데 사용되므로, 항목의 순서가 변경되거나, 항목이 추가 또는 제거될 때 React가 어떤 항목을 변경, 추가 또는 제거해야 하는지 식별하는 데 도움이 되고 이를 통해 React는 불필요한 렌더링을 방지하고 성능을 향상시킬 수 있음

또한, key는 React가 어떤 항목을 변경해야할지, 추가해야할지, 제거해야할지 판단하는 기준이 되기 때문에 key를 주지 않을 경우, 배열의 원소가 추가되거나 삭제될 때마다 전체 리스트를 다시 렌더링하게 됨 ⇒ 불필요한 리소스를 소모, 성능 저하됨

그래서 고유한 key 값을 각 원소에 부여함으로써 리액트는 최소한의 변경으로 UI를 업데이트할 수 있게 되고, 이런 방식으로 리액트는 렌더링 과정을 보다 효율적으로 만들 수 있음