리액트[기초] 초기 렌더링 과 조화 과정

렌더링 이란?

• 사용자 화면에 view를 보여주는 것을 말한다

---

초기 렌더링이란?

• 어떤 UI 관련 프레임워크, 라이브러리를 사용하던지 간에만 처음에 어떻게 보일지 정하는 초기 렌더링이 필요하다 
• 리액트에서는 초기 렌더링을 다루는 함수 render 가 있다 

---

render 함수란?

• 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다 
• html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌  객체를 반환한다 
• render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다 
• 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다

---

조화 과정 이란?

• 리액트에서 뷰를 업데이트할 때 쓰는 표현이다
• 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만 사실은 새로운 요소로 갈아 끼우기 때문에 뷰를 업데이트할 때 업데이트 과정을 거친다는 표현보다 조화 과정을 거친다라고 표현하는 것이 더 정확한 표현이다 
• 조화 과정 또한 render()가 맡아서 한다 
  1. 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트 한 값을 수정하는 것이 아니라 새로운 데이터를 가지고 render()를 또다시 호출한다
  2. 그러면 그  데이터를 가진 새로운 뷰가 생성된다 
  3. 하지만 이때 render()가 반환하는 결과를 곧바로 DOM에 반영하지 않고 이전에 render()가 만들었던 컴포넌트 정보와 현재 render()가 만든 컴포넌트 정보를 비교한다
  4. 자바스크립트를 사용해도 두 가지 뷰를 최소한의 연산으로 비교 후 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트한다