[React] 초기 렌더링

어떤 UI 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다.

리액트에서는 이를 다루는 render 함수가 있다.

render(){...}

이 함수는 컴포넌트가 어떻게 생겼는지를 정의하는 역할을 한다.

이 함수는 html형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.

컴포넌트 내부에는 또 다른 컴포넌트들이 들어 갈 수 있다.

이 때, render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다.

이렇게 최상위 컴포넌트의 랜더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML마크업(markup)을 만들고, 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다.

 

 

 

ReactDOM.render()란?

이 코드는 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다.
이 함수의 
1번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성하고
2번째 파라미터에는 해당 JSX를 렌더링 할 document 내부 요소를 설정한다.