리액트 구동원리
리액트 구동원리에 대해 알아보자.
프론트엔드의 생태계는 쉴틈없이 바뀐다.
리액트만 해도 업데이트가 빠른 편이라 공부를 하게 만든다. 정말.
이런 정신없는 상황에서 프론트엔드 개발자가 되려면 빠르게 변화하는 기술들을 즐길줄 알아야 한다..
그렇기 때문에 기분좋은 마음으로 리액트에 대해 알아보도록 하자.🔥🔥🔥
리액트는 가상 돔을 이용해 UI를 컨트롤 하는 프레임워크이다.
리액트 바로 전엔 Jquery, AngularJS, Backbone이 있었다.
2006년, Jquery는 등장과 동시에 프론트엔드 시장을 장악했고 DOM을 다루는 방식으로써 극찬을 받어 오랜시간 동안 사용 되어 왔다.
당시 SPA 프레임워크 였던 AngularJS와 Backbone가 함께 DOM을 직접적으로 업데이트 하는 수단으로 , Jquery를 사용했다.
리액트는 Jquery와는 다르게 DOM을 다루는데, 바로 virtual DOM, 가상돔 이라는 개념을 통해 DOM을 다룬다.
” 리액트는 렌더링 성능을 위해 가상 돔을 활용한다. ”
브라우저에서 돔을 변경하는 것은 비교적 오래 걸리는 작업이다.
따라서 빠른 렌더링을 위해서 돔 변경은 최소화 되어야 한다.
리액트는 메모리에 가상 돔을 올려놓고, 전후 데이터를 비교해서 변경된 부분만 실제 돔에 반영하는 전략을 채택했다.
화면을 그리는 코드를 렌더 함수로 작성하게 해서, UI 데이터가 변경되면 화면을 자동으로 갱신해준다.
그렇게 리액트는
(1) 렌더 단계 - 변경사항을 파악
(2) 커밋 단계 - DOM에 직접 반영이 두가지 단계를 거쳐 UI를 업데이트 하게 되고, 덕분에 불필요한 UI업데이트는 줄고, 성능은 좋아진다.
아니 여기서 잠깐,, DOM이란 무엇인가?
느낌적인 느낌으로 DOM이 뭔지는 알지만 설명하지는 못한다.
이 상황,, 바로 기술면접에 나오기 딱좋은 사항이다.