React DOM 컴포넌트
공통 컴포넌트
브라우저에 내장된 모든 컴포넌트는 일부 props와 이벤트를 지원합니다.
ref
와 dangerouslySetInnerHTML
같은 React 고유의 props를 포함합니다.
폼 컴포넌트
다음과 같은 브라우저에 내장된 컴포넌트는 사용자 입력을 받습니다.
value
프로퍼티를 전달하면 제어 할 수 있기 때문에 React에서 특별합니다.
모든 HTML 컴포넌트
React는 브라우저에 내장된 모든 HTML 컴포넌트를 지원합니다. 이는 다음과 같은 컴포넌트를 포함합니다.
<aside>
<audio>
<b>
<base>
<bdi>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<slot>
<small>
<source>
<span>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<u>
<ul>
<var>
<video>
<wbr>
커스텀 HTML 엘리먼트
<my-element>
같이 대시가 포함된 태그를 렌더링하면 React는 커스텀 HTML 엘리먼트를 렌더링한다고 가정합니다. React에서 커스텀 엘리먼트를 렌더링하는 방법은 브라우저 내장 태그를 렌더링하는 방법과 다릅니다.
- 모든 커스텀 엘리먼트 props는 문자열로 직렬화되며 항상 어트리뷰트를 사용하여 설정됩니다.
- 커스텀 엘리먼트는
class
대신className
을 사용하고for
대신htmlFor
를 사용합니다.
is
어트리뷰트를 사용하여 브라우저 내장 HTML 엘리먼트를 렌더링하면 커스텀 엘리먼트로 취급됩니다.
모든 SVG 컴포넌트
React는 브라우저에 내장된 모든 SVG 엘리먼트를 지원합니다. 이는 다음과 같은 것을 포함합니다.
<a>
<animate>
<animateMotion>
<animateTransform>
<circle>
<clipPath>
<defs>
<desc>
<discard>
<ellipse>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feDropShadow>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<foreignObject>
<g>
<hatch>
<hatchpath>
<image>
<line>
<linearGradient>
<marker>
<mask>
<metadata>
<mpath>
<path>
<pattern>
<polygon>
<polyline>
<radialGradient>
<rect>
<script>
<set>
<stop>
<style>
<svg>
<switch>
<symbol>
<text>
<textPath>
<title>
<tspan>
<use>
<view>