필요 지식

<aside> 🔑

리액트에서의 **렌더링(Rendering)**이란?

리액트가 컴포넌트에게 현재 props와 state를 기반으로, 화면에 어떻게 보여주고 싶은지 요청하는 과정

</aside>

리액트가 컴포넌트를 호출합니다. 그럼 컴포넌트가 자신의 UI를 반환하게 되는데요. 보통 컴포넌트는 JSX 문법을 반환합니다. 그럼 해당 문법이 컴파일되어 변환되는데, 다음과 같은 형태가 됩니다

<Component title="Lee" id={1}>I don't know react</Component>

// Babel과 같은 "트랜스파일러"가 JSX 문법을 자바스크립트로 변환합니다
// 인자는 차례대로 HTML tag명, props 객체, 자식 요소
React.createElement(Component, {title: "Lee", id: 1 }, "I don't know react")

// React.createElement 함수는, 다음과 같이 객체를 반환합니다
{
	type: 'Component',
	props: {
		title: 'Lee',
		id: 1,
		children: ["I don't know react"]
	}
}
// 그럼 이제 이 객체가 실제 DOM으로 변환되어 렌더링하게 됩니다