게시글은 리액트 공부용이며 출처를 제시합니다.
출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive
리액트 컴포넌트가 최초로 실행한 '초기 렌더링'
컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링'
초기 렌더링
맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다.
리액트에서는 이를 다루는 render함수가 있다.
이 함수는 컴포넌트가 어떻게 생겼는지 정의한다.
이 함수는 html 형식의 문자열을 반환하지 않고 객체를 반환한다.
해당 객체는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보가 담겨있다.
최상위의 컴포넌트가 render되며 그 컴포넌트의 자식 컴포넌트도 모두 재귀저긍로 렌더링 한다.
최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다.
즉 앞선 블로그에서
[결국 리액트의 virtual DOM에서 DOM으로 이동하는 과정]
이라고 언급한 적이 있다.
조화 과정 a.k.a리렌더링
보통은 업데이트 과정을 거친다라고 표현하지만 조화 과정을 거친다라고 하는 것이 더 정확하다. 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우기 때문이다
이전 블로그에서
[엘리먼트는 불변성을 가지고 있어 virtual DOM이 새로운 엘리먼트로 연결하는 것]
이라고 언급한 적이 있다.
-
render 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
-
컴포넌트는 데이터를 업데이트 했을 때 새로운 데이터를 가지고 render 함수를 또 다시 호출한다.
-
이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고
-
이전 render 함수가 만들었떤 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.
리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트 하는 과정
- 데이터를 업데이트 하면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
