[React] 리액트 초기 렌더링(render 함수)

📍 렌더링(Rendering)이란?
사용자 화면에 뷰를 보여 주는 것

❓🤔 리액트 라이브러리는 어떻게 뷰를 렌더링하기에 데이터가 변할 때마다 새롭게 리렌더링해서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있는걸까?

이를 알기 위해서는 리액트 컴포넌트가 최초로 실행한 ‘초기 렌더링’과 컴포넌트의 데이터 변경으로 다시 실행되는 ‘리렌더링’ 개념을 이해해야 한다.

👉 초기 렌더링

맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요한데, 리액트에서는 render 함수를 사용해 컴포넌트를 정의한다.

render() { ... }

① html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환함.
↓
② 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있음. 이때 render 함수를 실행하면 내부에 있는 컴포넌트들도 재귀적으로 렌더링함.
↓
③ 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업(markup)을 만들고, 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입
↓
④ 컴포넌트를 실제 페이지에 렌더링할 때에는 분리된 두 가지 절차(ⓐ, ⓑ)를 따름. 문자열 형태의 HTML 코드를 생성한 후(ⓐ), 특정 DOM에 해당 내용을 주입(ⓑ)하면 이벤트가 적용됨.