본문 바로가기

virtual dom

(2)
리액트와 가상돔(virtual dom) 리액트의 렌더 / 커밋과 virtual dom 사이의 관계를 알아봅시다. virtual Dom이라는 용어는 리액트 공식 문서의 단 한곳에서만 사용되며 설명도 길지 않습니다. (https://reactjs.org/docs/faq-internals.html) 즉, 리액트 사용자는 전혀 몰라도 되는 implementation Detail일 뿐입니다. 리액트는 렌더링 요청을 pulling한 후 적절한 시점에 렌더링을 대신해주는 UI 라이브러리일 뿐입니다. ... 일부 인기 있는 라이브러리는 새 데이터를 사용할 수 있을 때 계산이 수행되는 "푸시" 접근 방식을 구현합니다. React는 필요할 때까지 계산이 지연될 수 있는 "풀(pull)" 접근 방식을 고수합니다. ... React가 코드 제어를 가져오기 전에 실..
리액트 성능 최적화 : Virtual DOM 1. Virtual DOM은 무엇인가요? (공식 문서) Virtual DOM (VDOM)은 UI의 "이상" 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다.. 실제 DOM과 Virtual DOM을 동기화하는 과정을 재조정이라고 합니다. Virtual DOM은 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다. Data 조작을 통해 UI를 업데이트하여 돔 조작 코드를 제거하여 생산성을 향상시킵니다. 2. 리액트 컴포넌트의 생명 주기 Re..