웹브라우저의 랜더링은 'DOM, CSSOM 생성 -> DOM, CSSOM을 가지고 랜더링 트리(청사진, blue print) 생성 -> 레이아웃 -> 페인트' 과정을 거친다. 여기서 일반 js로 돔을 수정하면 위 4단계가 다시 실행된다. 그런데 랜더링 과정 중 마지막 두단계 ReFlow(=ReLayout), RePaint에서 리소스가 많이 든다. 그래서 일반 js로 돔을 조작할때 돔 조작을 최소화해야한다. 하지만 프로젝트 규모가 커질수록 그 작업은 어려워진다. 이것을 해결하기 위해 리액트가 나왔다. 리액트는 돔 조작을 최소화하는 작업을 추상화해서 개발자 대신 해준다. 그 결과 대부분의 상황에서 업데이트 속도가 더 빨라진다. 리액트에서는 Render phase, Commit phase가 있다. Render..

유투브에서 40년 동안 소프트웨어 개발을 해오신 분을 봤다. 오랜 세월 동안 개발을 하신 것이 대단해보였고 정말 개발 자체를 좋아하신다는 느낌을 받았다. 그분이 강조하신게 표준이다. 표준은 기본에서 조금 발전된 것이고 많은 시간을 통해 만들어졌다. 그리고 표준은 기술 축적이 된다. 웹 표준. 그 중에 하나가 DOM이다. DOM은 Document Object Model, 문서객체모델이다. 웹 브라우저에서 HTML이나 XML같은 문서의 요소(태그)들을 조작 가능하도록 객체화시킨 것이다. 예를 들면 이나 를 자바스크립트가 이용할 수 있는 객체(object)로 만든 것이다. 조금 어렵게 말하면 DOM은 화면의 구성요소(HTML 태그)들을 조작할 수 있는 '인터페이스'이다. 인터페이스는 '어떤 기능을 사용하기 위..

우선 돔은 Document Object Model, 문서 객체 모델이다. 문서 객체란 웹페이지를 이루는 html, head, body와 같은 태그들을 javascript가 이용할 수 있도록 만든 객체이다. (브라우저가 만들었다. 트리구조로.) 리액트는 가상돔을 사용한다. 실제 돔이 아닌 가짜돔. 웹페이지에서 사용자의 동작에 따른 이벤트가 발생하면 실제돔을 바로 바꾸지 않는다. 먼저 자바스크립트로 된 가상돔을 랜더링한다(가상돔에 올라간다라고도 표현). 가상돔은 메모리에 저장된다. 그리고 이전의 돔과 비교를 하여 다른 요소(변경부분)만 실제 돔에 반영한다. 반영을 할 때는 수정을 하는 것이 아니다. 이전의 돔에 있던 요소를 버리고 새로운 요소로 갈아끼우는 것이다.