HTML 에서
•
HTML을 구성하는 것
•
웹 페이지에서 텍스트, 이미지 비디오와 같은 컨텐츠를 나타내기 위해 사용됨
•
한국어로 요소로 주로 번역됨
React 에서
•
React가 화면에 표시할 것을 설명하는 immutable한 plain javasciprt 객체 일 뿐 UI 표시에 사용되는 실제 instance는 아니다. → VDOM
◦
당연하게도 VDOM은 실제 DOM보다 가볍다. → parsing할 필요가 없음
•
개발자가 실제로 직접 접근하여 조작하는건 일반적이지 않음. → 컴포넌트로 부터 반환되는 값.
•
컴포넌트 타입(button, input)과 props + 자식들의 정보만 가지고 있다. → nested 가능
// HTML에서의 element
<button class='button button-blue'>
<b>
OK!
</b>
</button>
// React에서의 element
{
type: 'button',
props: {
className: 'button button-blue',
children: {
type: 'b',
props: {
children: 'OK!'
}
}
}
}
TypeScript
복사
◦
이 정보를 기반으로 react는 instance화 하고 react DOM이 브라우저에 실제로 paint 한다.
•
HTML Element도 react element가 될 수 있으며 컴포넌트 또한 element가 될 수 있음
// JSX로 표현된 element
const DeleteAccount = () => (
<div>
<p>Are you sure?</p>
<DangerButton>Yep</DangerButton>
<Button color='blue'>Cancel</Button>
</div>
);
// react element
const DeleteAccount = () => ({
type: 'div',
props: {
children: [{
type: 'p',
props: {
children: 'Are you sure?'
}
}, {
type: DangerButton,
props: {
children: 'Yep'
}
}, {
type: Button,
props: {
color: 'blue',
children: 'Cancel'
}
}]
});
TypeScript
복사
runtime에서 element의 모습
import page1 from "./page1";
export default function Home() {
console.log(<page1 />);
console.log(<h1>ㅗㅑ</h1>);
return <h1>nextjs-playground</h1>;
}
TypeScript
복사
