React DOM ์ปดํฌ๋ํธ
๊ณตํต ์ปดํฌ๋ํธ
๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ๋ ๋ชจ๋ ์ปดํฌ๋ํธ๋ ์ผ๋ถ Props์ ์ด๋ฒคํธ๋ฅผ ์ง์ํฉ๋๋ค.
ref
์ dangerouslySetInnerHTML
๊ฐ์ React ๊ณ ์ ์ Props๋ฅผ ํฌํจํฉ๋๋ค.
ํผForm ์ปดํฌ๋ํธ
๋ค์๊ณผ ๊ฐ์ ๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ๋ ์ปดํฌ๋ํธ๋ ์ฌ์ฉ์ ์ ๋ ฅ์ ๋ฐ์ต๋๋ค.
value
ํ๋กํผํฐ๋ฅผ ์ ๋ฌํ์ฌ ์ ์ดํ ์ ์๊ธฐ ๋๋ฌธ์ React์์ ํน๋ณํฉ๋๋ค.
Resource and Metadata Components
๋ค์ ๋ธ๋ผ์ฐ์ ์ปดํฌ๋ํธ๋ค์ ์ฌ์ฉํ๋ฉด ์ธ๋ถ ๋ฆฌ์์ค๋ฅผ ๋ก๋ํ๊ฑฐ๋ ๋ฉํ๋ฐ์ดํฐ๋ก ๋ฌธ์์ ์ฃผ์์ ๋ฌ ์ ์์ต๋๋ค.
์ ์ปดํฌ๋ํธ๋ค์ React์์ ํน๋ณํ๊ฒ ๋ค๋ค์ง๋๋ค. React๋ ์ ์ปดํฌ๋ํธ๋ค์ document head ๋ด๋ถ์ ๋ ๋๋งํ๊ณ , ๋ฆฌ์์ค๋ฅผ ๋ถ๋ฌ์ฌ ๋์ ์ผ์ ์ค๋จํ๊ณ , ๊ฐ ํน์ ๊ตฌ์ฑ ์์์ ์ฐธ์กฐ ํ์ด์ง์ ์ค๋ช ๋ ๋ค๋ฅธ ๋์์ ์ํํฉ๋๋ค.
๋ชจ๋ 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>
๊ฐ์ด ๋์Dash๊ฐ ํฌํจ๋ ํ๊ทธ๋ฅผ ๋ ๋๋งํ๋ฉด 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>