Virtual DOM, key

Virtual DOM이란?
Virtual DOM은 리액트에서 사용되는 개념으로, 실제 DOM(Document Object Model)을 추상화한 가상의 개념이다. 리액트는 컴포넌트들이 상태(State)가 변할 때마다 실제 DOM을 바로 업데이트하지 않고, 이 가상의 DOM을 메모리에 유지하고 있다.

Virtual DOM을 사용하는 이유는?
성능 향상: 실제 DOM 조작은 비용이 많이 드는 연산다. Virtual DOM은 메모리에서 처리하기 때문에, 실제 DOM 조작 횟수를 최소화하여 성능을 향상시킨다.

반응성: 사용자 인터랙션에 따른 빠른 UI 업데이트를 가능하게 한다. Virtual DOM을 통해 변경된 부분만 실제 DOM에 반영하므로, 전체 페이지를 다시 렌더링할 필요가 없다.

플랫폼 독립성: Virtual DOM은 실제 DOM과 플랫폼에 독립적이다. 이는 서버 사이드 렌더링(Server-Side Rendering, SSR)과 같은 다양한 환경에서 일관된 동작을 가능하게 한다.

리액트에서 배열을 렌더링할 때 key를 사용해야 하는 이유는?
key는 리액트에서 배열을 렌더링할 때 각 요소를 구별하는 식별자로 사용된다.

성능 최적화: 리액트는 렌더링 시 key를 기준으로 이전 DOM과 새 DOM을 비교하여 변경된 부분만 업데이트한다. key가 없으면 리액트가 배열의 순서와 관계없이 모든 요소를 새로 그리게 되어 성능이 저하될 수 있다.

요소의 식별: key는 각 요소를 고유하게 식별하는 역할을 한다. 예를 들어, 동일한 컴포넌트를 배열에 반복적으로 렌더링할 때, key를 사용하지 않으면 리액트는 요소들을 구분할 수 없어서 예상치 못한 동작이 발생할 수 있다.

컴포넌트 상태 유지: key가 변경되면 리액트는 해당 요소를 새로운 것으로 처리하므로, 컴포넌트 상태가 유지된다. 예를 들어, 입력 필드에 사용자가 입력한 내용이 key로 구분된 항목에 바로 적용될 수 있다.