필요 지식
리액트에서의 렌더링(Rendering)이란?
리액트가 컴포넌트에게 현재 props와 state를 기반으로, 화면에 어떻게 보여주고 싶은지 요청하는 과정
리액트가 컴포넌트를 호출합니다. 그럼 컴포넌트가 자신의 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으로 변환되어 렌더링하게 됩니다
JavaScript
복사