리액트 구동원리에 대해 알아보자.
리액트는 가상 돔을 이용해 UI를 컨트롤 하는 프레임워크이다.
리액트 전에 주로 사용되던 프레임워크인 Jquery(2006년)는 DOM을 직접적으로 업데이트 했다. 브라우저에서 돔을 변경하는 것은 비교적 오래 걸리는 작업이다. 리액트는 Jquery와는 다르게 virtual DOM, 가상돔 이라는 개념을 통해 DOM을 다룬다.
빠른 렌더링을 위해서 돔 변경은 최소화 되어야 한다.
리액트는 메모리를 가상에 존재하는 DOM에 올려놓고,
전후 데이터를 비교해서 변경된 부분만 실제 돔에 반영하는 전략을 채택했다.
화면을 그리는 코드를 렌더함수 로 작성함으로, UI 데이터가 변경되면 화면을 자동으로 갱신해준다.
그렇게 리액트는
(1) 렌더 단계 - 변경사항을 파악
(2) 커밋 단계 - DOM에 직접 반영
이 두가지 단계를 거쳐 UI를 업데이트 하게 되고, virtual DOM은 JS 객체이기 때문에 실제로 브라우저에서 DOM을 보여주는 것 보다 속도가 빠르다.
아니 여기서 잠깐,, DOM이란 무엇인가?
느낌적인 느낌으로 DOM이 뭔지는 알지만 설명하지는 못한다.
이 상황,, 바로 기술면접에 나오기 딱좋은 사항이다.
다음 글에서 DOM에 대해 바로 이어서 공부해보자
충전중..🤔