- 리액트는 특징적으로 Virtual DOM을 사용한다.
🍸 가상 돔은 기술이라기보다는 패턴에 가깝다.- 가상의 DOM을 메모리에 저장한 뒤, 실제 DOM과 동기화를 통해서 변화된 부분만 다시 렌더링 하는 방식으로 렌더링을 최적화한다.
🍽 동기화가 일어나는 과정을 재조정(Reconciliation)이라고 한다.- 이를 통해서 React의 선언적 API가 가능하게 된다.
🍑 리액트에게 원하는 UI의 상태를 알려주면, DOM을 그 상태와 일치시킨다.
🍆 재조정 (Reconciliation)
-
리액트의 선언적 API덕분에 코드가 바뀔 때 마다 매번 무엇이 바뀌었던지 리액트가 알아서 처리를 해준다.
-
render() 함수는 React 엘리먼트 트리를 만들어낸다.
-
state나 props가 갱신되어 다시 렌더링이 일어난다면, render() 함수는 새로운 React 엘리먼트 트리를 반환한다.
-
리액트는 실제 DOM에 접근하여 조작을 하는 것이 아니라, Virtual DOM을 만들어 내고, 기존의 DOM과 달라진 점을 발견하여 바뀐 부분만 DOM에 적용한다.
🍒 가상 돔을 이용하면, UI 업데이트 과정이 간소화된다. -
리액트에서 트리의 비교에 사용되는 알고리즘은 O(n) 복잡도의 휴리스틱 알고리즘이다.
🥒 휴리스틱 알고리즘 : 최적의 방법이 너무 느리고, 정확한 판단이 꼭 필요하지 않을 때, 대략적인 솔루션을 찾기 위해 설계된 알고리즘이다.
참고 자료 출처 : https://ko.reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom, https://ko.reactjs.org/docs/reconciliation.html
🙌🙌🙌🙌