리액트 선언형

React는 화면을 어떻게 변경해야 하는 신경 쓸 필요 없이 새로 보여줄 결과 ReactElement를 선언하고 render한다. (선언형)

하지만 새로운 결과를 선언하고 render한다고 해서 기존 element가 완전히 제거되고 새로운 element가 이를 대체한다면, 다음과 같은 문제가 발생한다.

• DOM 조작은 큰 비용을 수반하기 때문에 어플리케이션의 퍼포먼스가 저하될 수 있음
• 화면 깜빡임

⇒ React는 이런 문제를 해결하기 위해 Virtual DOM과 재조정(reconciliation)이라는 개념을 도입했다.

Virtual DOM

React는 상태가 변경되면 DOM을 업데이트 하지 않고 완전히 새로 만드는 방식을 채택했다.
모든 DOM을 날려버리고 다시 교체하는 과정은 굉장히 느리지만 리액트에서는 Virtual DOM을 사용해서 변경되는 부분만 찾아서 수정을 가한 뒤 실제 DOM에 반영하여 화면 교체를 빠르게 진행한다.

DOM을 메모리상에 저장해두고 상태 변경시 가상 돔을 활용한 재조정(Reconciliation) 과정을 통해 화면을 효율적으로 갱신하는 시스템이다.바로 이 접근방식이 React의 선언적 동작을 가능하게 한다.

개발자가 원하는 UI의 모습을 알려주면 리액트가 화면을 그릴 DOM이 그 UI의 상태와 일치하도록 '조정'한다. 이 과정에서 리액트가 수동적인 DOM 조작을 알아서 해준다. (=> 추상화로 숨겨짐 - 개발자는 관여하지 않음)