시작하기
리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다.
초기 렌더링
사용자에게 처음 화면에 어떻게 보여질지를 정하는 렌더링이 필요합니다. 리액트에서는 이를 render 함수가 수행합니다. 이 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다. 이때 컴포넌트 내부에는 또 다른 컴포넌트를 포함할 수 있습니다. 이렇게 렌더링 작업이 끝나면 HTML 마크업을 만들고, 실제 페이지의 DOM 요소 안에 주입합니다.
재조정
리액트에서 뷰를 업데이트 할 때는 '업데이트 과정을 거친다' 보다는 '조화 과정을 거친다'라는 표현이 더 어울립니다. 컴포넌트에서 데이터에 변화가 생길 경우, 새로운 요소로 갈아끼워주기 때문입니다. 이 작업 또한 render 함수가 수행합니다. 새롭게 변화된 데이터를 가지고 새로운 뷰를 생성합니다. 이때 바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 정보와 비교 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 합니다.
Virtual DOM이란
가상돔이란 실제 DOM문서를 추상화한 개념으로, 실제 DOM과 유사한 자바스크립트 객체인 가상돔을 구성하여 실제 DOM에 적용하기 전에 미리 처리한 후 변경 된 부분만 실제 DOM에 적용하게 됩니다.
리액트가 가상돔을 반영하는 절차
- 데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링한다.
- 이전 가상돔에 있던 내용과 현재 내용을 비교한다.
- 변경 된 부분만 실제 DOM에 적용한다.
