가상돔 동작방식
-
가상돔Study/React 2021. 9. 18. 18:25
리액트는 렌더링 성능을 위해 가상 돔을 활용한다. 브라우저에서 돔을 변경하는 것은 비교적 오래 걸리는 작업이다. 따라서 빠른 렌더링을 위해서는 돔 변경을 최소화 해야한다. 그래서 리액트는 메모리에 가상 돔을 올려 놓고 이전과 이후의 가상 돔을 비교해서 변경된 부분만 실제 돔에 반영하는 전략을 채택했다. 리액트 요소 이해하기 JSX문법으로 작성된 코드는 리액트의 createElement 함수로 변경된다. 리액트가 UI를 표현하기 위해 사용하는 리액트 요소의 구조를 살펴보자. const elementJSX = click here const element = React.createElement( 'a', { href: 'https://shinyeong.com' }, 'click here', ); 첫줄의 ele..