리엑트-렌더링이란?

● 렌더링이란?

 컴포넌트가 현재의 프롭스와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업.

 쉽게말해, html요소(element) 또는 react 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링이라고 한다.

 

 엘리먼트는 react의 가장 작은 단위이며 화면에 표시할 내용을 담고있다.

 

● 렌더링을 실행하는 과정 : react 컴포넌트가 렌더링을 수행하는 시점:

1. Props가 변경되었을 때

2. State가 변경되었을 때

3. 부모 컴포넌트가 렌더링되었을 때

 

●ReactDom.render() 이란?

ReactDom.render() 함수를 통해 Web Api를 사용하여 웹 브라우저에 그려주는 함수입니다.

React.createElement를 통해 Object를 생성하고 이를In-Memory에 저장합니다.

Root DOM Node에 렌더링 하기 위해서 이를 사용합니다.

 

●정리:

리엑트는 props 와 state 의 조합으로 리엑트 컴포넌트를 렌더링합니다.

그리고 렌더링 된 리엑트 컴포넌트는 ReactDom.render() 을 호출했을 경우 혹은

상태가 변경되었을 경우 다시 렌더링됩니다. 리엑트는 기본적으로 부모 컴포넌트가 렌더링 할 때 자식 컴포넌트

또한 렌더링되는데 여기에 예외 기준들이 존재합니다.

이와 같은 흐름을 통해 리엑트 컴포넌트가 렌더링 되는 경우를 알아봤습니다.