React DOM ์ปดํฌ๋„ŒํŠธ

React๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋‚ด์žฅ๋œ ๋ชจ๋“  HTML๊ณผ SVG ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.


๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ

๋ธŒ๋ผ์šฐ์ €์— ๋‚ด์žฅ๋œ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋Š” ์ผ๋ถ€ Props์™€ ์ด๋ฒคํŠธ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

ref์™€ dangerouslySetInnerHTML๊ฐ™์€ React ๊ณ ์œ ์˜ Props๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.


ํผForm ์ปดํฌ๋„ŒํŠธ

๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ธŒ๋ผ์šฐ์ €์— ๋‚ด์žฅ๋œ ์ปดํฌ๋„ŒํŠธ๋Š” ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ๋ฐ›์Šต๋‹ˆ๋‹ค.

value ํ”„๋กœํผํ‹ฐ๋ฅผ ์ „๋‹ฌํ•˜์—ฌ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— React์—์„œ ํŠน๋ณ„ํ•ฉ๋‹ˆ๋‹ค.


Resource and Metadata Components

๋‹ค์Œ ๋ธŒ๋ผ์šฐ์ € ์ปดํฌ๋„ŒํŠธ๋“ค์„ ์‚ฌ์šฉํ•˜๋ฉด ์™ธ๋ถ€ ๋ฆฌ์†Œ์Šค๋ฅผ ๋กœ๋“œํ•˜๊ฑฐ๋‚˜ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋กœ ๋ฌธ์„œ์— ์ฃผ์„์„ ๋‹ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์œ„ ์ปดํฌ๋„ŒํŠธ๋“ค์€ React์—์„œ ํŠน๋ณ„ํ•˜๊ฒŒ ๋‹ค๋ค„์ง‘๋‹ˆ๋‹ค. React๋Š” ์œ„ ์ปดํฌ๋„ŒํŠธ๋“ค์„ document head ๋‚ด๋ถ€์— ๋ Œ๋”๋งํ•˜๊ณ , ๋ฆฌ์†Œ์Šค๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋™์•ˆ ์ผ์‹œ ์ค‘๋‹จํ•˜๊ณ , ๊ฐ ํŠน์ • ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ฐธ์กฐ ํŽ˜์ด์ง€์— ์„ค๋ช…๋œ ๋‹ค๋ฅธ ๋™์ž‘์„ ์‹œํ–‰ํ•ฉ๋‹ˆ๋‹ค.


๋ชจ๋“  HTML ์ปดํฌ๋„ŒํŠธ

React๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋‚ด์žฅ๋œ ๋ชจ๋“  HTML ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค!

DOM ํ‘œ์ค€๊ณผ ์œ ์‚ฌํ•˜๊ฒŒ React๋Š” ํ”„๋กœํผํ‹ฐ์— camelCase ํ‘œ๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด tabindex ๋Œ€์‹  tabIndex๋กœ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. ์˜จ๋ผ์ธ ๋ณ€ํ™˜๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ธฐ์กด HTML์„ JSX๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


์ปค์Šคํ…€ HTML ์š”์†Œ

<my-element>๊ฐ™์ด ๋Œ€์‹œDash๊ฐ€ ํฌํ•จ๋œ ํƒœ๊ทธ๋ฅผ ๋ Œ๋”๋งํ•˜๋ฉด React๋Š” ์ปค์Šคํ…€ HTML ์š”์†Œ๋ฅผ ๋ Œ๋”๋งํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. React์—์„œ ์ปค์Šคํ…€ ์š”์†Œ๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ธŒ๋ผ์šฐ์ € ๋‚ด์žฅ ํƒœ๊ทธ๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

  • ๋ชจ๋“  ์ปค์Šคํ…€ ์š”์†Œ Props๋Š” ๋ฌธ์ž์—ด๋กœ ์ง๋ ฌํ™”๋˜๋ฉฐ ํ•ญ์ƒ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.
  • ์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ๋Š” class ๋Œ€์‹  className์„ ์‚ฌ์šฉํ•˜๊ณ  for ๋Œ€์‹  htmlFor๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

is ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ € ๋‚ด์žฅ HTML ์š”์†Œ๋ฅผ ๋ Œ๋”๋งํ•˜๋ฉด ์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ๋กœ ์ทจ๊ธ‰๋ฉ๋‹ˆ๋‹ค.

์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค!

ํ–ฅํ›„ React ๋ฒ„์ „์—๋Š” ์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ์— ๋Œ€ํ•œ ๋” ํฌ๊ด„์ ์ธ ์ง€์›์„ ์ œ๊ณตํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

React ํŒจํ‚ค์ง€๋ฅผ ์ตœ์‹  ์‹คํ—˜ ๋ฒ„์ „์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜์—ฌ ์‚ฌ์šฉํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • react@experimental
  • react-dom@experimental

React ์‹คํ—˜ ๋ฒ„์ „์€ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์—์„œ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”.


๋ชจ๋“  SVG ์ปดํฌ๋„ŒํŠธ

React๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋‚ด์žฅ๋œ ๋ชจ๋“  SVG ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒƒ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค!

DOM ํ‘œ์ค€๊ณผ ์œ ์‚ฌํ•˜๊ฒŒ React๋Š” ํ”„๋กœํผํ‹ฐ์— camelCase ํ‘œ๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด tabindex ๋Œ€์‹  tabIndex๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. ์˜จ๋ผ์ธ ๋ณ€ํ™˜๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ธฐ์กด SVG๋ฅผ JSX๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋„ค์ž„์ŠคํŽ˜์ด์Šค ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๋˜ํ•œ ์ฝœ๋ก  ์—†์ด ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • xlink:actuate ๋Œ€์‹  xlinkActuate
  • xlink:arcrole ๋Œ€์‹  xlinkArcrole
  • xlink:href ๋Œ€์‹  xlinkHref
  • xlink:role ๋Œ€์‹  xlinkRole
  • xlink:show ๋Œ€์‹  xlinkShow
  • xlink:title ๋Œ€์‹  xlinkTitle
  • xlink:type ๋Œ€์‹  xlinkType
  • xml:base ๋Œ€์‹  xmlBase
  • xml:lang ๋Œ€์‹  xmlLang
  • xml:space ๋Œ€์‹  xmlSpace
  • xmlns:xlink ๋Œ€์‹  xmlnsXlink