이전에 브라우저의 렌더링이 어떤 방식으로 이루어지는 지 알아봤다 이번에는 React에서의 렌더링을 알아보자! 클래스 컴포넌트에서의 LifeCycle에 대한 이미지를 가지고 왔다. ComponentDidUpdate, DidMount 등등은 우리가 많이 알고 있는 익숙한 것들이다. 하지만 옆에 Render Phase, Commit Phase에 대해서는 특별하게 들어본 적이 없다. React에서의 Render Phase와 Commit Phase가 무엇인지 알아보자 Render Phase 간단하게 말하자면 컴포넌트 함수를 호출해서 React의 Element를 반환하고 새로운 Virtual DOM을 만들어준다. 그리고 최초 렌더링이 아니라면 재조정을 통해서 실제 DOM에서 적용할 변경점을 확인한다. 재조정 ( R..

1. DOM DOM이란 문서 객체 모델(Document Object Model)로 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스다. 여기서 말하는 문서 객체란, html, head, body, footer 같은 태그를 JavaScript에서 이용할 수 있는 객체를 의미한다. 즉, DOM은 HTML과 스크립트언어(JavaScript)를 이어주는 역할을 하고 있다. 2. Virtual DOM이 나온 이유 만약 요소를 수정할 경우 DOM의 document.getElementById를 사용할 경우 아쉬운 점이 있다. 1. 메모리 누수와 속도 요소를 찾는 코드를 변수에 저장하지 않고 매번 document.getElementById를 사용한다면, 각 단계마다 페이지의 모든 document를 훑으며 ..

1. DOM? Document Object Model의 약자이며, XML이나, HTML 문서에 접근하기 위한 인터페이스라고 보면 된다. 위와 같은 계층 구조로 나타나 있으며, 자바스크립트를 사용해서 문서의 요소를 변경, 수정, 삭제할 수 있다. 2. Element html 태그를 사용하지 않고, 자바스크립트로 직접 만들 수 있다. 이것을 React에서 어떤 방식으로 사용할까? 3. React에서의 Element 다루기 보는 바와 같이 React에서도 Element를 생성, 수정을 할 수 있다.