가상돔

: 메모리에 가상돔을 올려놓고 이전과 이후의 가상돔 비교하여 변경된 부분만 실제 돔에 반영
: 실제돔을 만들 수 있는 리액트 요소 트리

컴포넌트 리액트 요소

//jsx
function Title({ title, color }) {
	return <style ={{ color}}> {titlee} </p>
}
const element = <Title title ="안녕하세여" color = "blue" />
cosole.log(element);

// 리액트 요소
const consoleLogResult = {
	type: Title,
	props: {title: '안녕하세요', color: 'blue' },
};

-> 리액트 요소는 불변객체이기 때문에 변경하려고 하면 에러 발생

• 컴포넌트 추가 : mount
• 컴포넌트 삭제 : unmount

✔️ 컴포넌트에 키 값을 주게 되고 이 키값이 계속 변하게 되면 컴포넌트는 키가 변경 될 때마다 unmount와 mount를 계속 하게 됨.
=> 조건부 렌더링으로도 비슷한 효과를 볼 수 있음

✔️ 하나의 리액트 요소 트리는 시간에 따라 변화하는 화면의 한 순간을 나타냄

데이터 변경에 의한 화면 업데이트

1. 렌더 단계 -> 실제 돔에 반영할 변경사항을 파악(가상돔 이용)
2. 커밋 단계 -> 파악된 변경사항을 실제 돔에 반영(실제돔 이용)

📍 실행할 jsx 코드

function Todo({ title, desc }) {
	const [priority, setPriority] = useState("high");
	function onClick() {
		setPriority(priority === 'high' ? 'low' : 'high');
	}
	return (
		<div>
			<Title title={title}/>
			<p>{desc}</p>
			<p>{priority === 'high' ? "우선순위 높음" : "우선순위 낮음"}</p>
		</div>
	);
}

const Title = React.memp(({title}) => {
	return <p style={{color: 'blue' }}>{title}</p>;
});

ReactDom.render(
	<Todo title="리액트 공부하기" desc="실전 리액트 프로그래밍을 공부한다" />,
	document.getElementById('root');
);

📍 Todo 컴포넌트로 만들어지는 리액트 요소

const intialElementTree = {
	type: Todo,
	props: {
		title: "리액트 공부하기",
		desc: "실전 리액트 프로그래밍을 공부한다",
	},
	...
};

📍 Todo컴포넌트 함수의 렌더링 결과

const elementTree = {
	type: "div",
	props: {
		children: [
			{
				type: Title,
				props: { title: '리액트 공부하기' },
				//...
			},
			{
				type: 'p',
				props: { children: '실전 리액트 프로그래밍을 공부한다' },
				//...
			},
			{
				type: 'p',
				props: { children: '우선순위 높음' },
				//...
			},
			{
				type: 'button',
				props: {
					onClick: function () {
						/* Todo 컴포넌트의 onClick함수 */
					}
					children: '우선순위 변경',
				},
				//...
			}
		],
	},
//...
};

→ Title 컴포넌트가 존재하기 때문에 이 리액트 요소 트리를 실제 돔으로 만들 수 없음
✔️리액트 요소 트리가 실제 돔으로 만들어지기 위해서는 모든 리액트 요소의 타입 속성값이 문자열이어야함

📍 Title 컴포넌트 함수의 렌더링 결과

const elementTree = {
	type: "div",
	props: {
		children: [
			{
				type: 'p',
				props: { 
					style: { color: 'blue' },
					children: '리액트 공부하기',
				},
				//...
			},
			{
				type: 'p',
				props: { children: '실전 리액트 프로그래밍을 공부한다' },
				//...
			},
			{
				type: 'p',
				props: { children: '우선순위 높음' },
				//...
			},
			{
				type: 'button',
				props: {
					onClick: function () {
						/* Todo 컴포넌트의 onClick함수 */
					}
					children: '우선순위 변경',
				},
				//...
			}
		],
	},
//...
};

→ 실제 돔 만들 수 있음

✔️ 렌더 단계 : 최초의 리액트 요소 트리로부터 가상돔을 만들고 이전 가상돔과 비교하여 실제 돔에 반영할 내용을 결정하는 단계

상태값 변경 함수에 의해 수행되는 렌더 단계

1. 버튼을 클릭하면 priority 상태값이 변경됨 → 렌더 단계 시작
2. Todo 컴포넌트의 priority 상태값이 변경되면 Todo컴포넌트 함수가 호출됨
3. 리액트 요소 트리 렌더링 결과 재사용
4. 변경된 부분만 업데이트

📍 Todo컴포넌트 함수의 렌더링 결과

const elementTree = {
	type: "div",
	props: {
		children: [
			{
				type: Title,
				props: { title: '리액트 공부하기' },
				//...
			},
			{
				type: 'p',
				props: { children: '실전 리액트 프로그래밍을 공부한다' },
				//...
			},
			{
				type: 'p',
				props: { children: '우선순위 낮음' },
				//...
			},
			{
				type: 'button',
				props: {
					onClick: function () {
						/* Todo 컴포넌트의 onClick함수 */
					}
					children: '우선순위 변경',
				},
				//...
			}
		],
	},
//...
};