ํˆด์Šค๋ชจ์•„

HTML โ†’ JSX ๋ณ€ํ™˜๊ธฐ

HTML ์ฝ”๋“œ๋ฅผ React JSX ํ˜•์‹์œผ๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

HTML ์ž…๋ ฅ
๋ณ€ํ™˜ํ•  HTML ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”
JSX ๊ฒฐ๊ณผ
๋ณ€ํ™˜๋œ JSX ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค
HTML โ†’ JSX ๋ณ€ํ™˜ ๊ทœ์น™

์ฃผ์š” ๋ณ€ํ™˜ ๊ทœ์น™

  • โ€ข class โ†’ className
  • โ€ข for โ†’ htmlFor
  • โ€ข style="color: red" โ†’ style={color: "red"}
  • โ€ข ์ž์ฒด ๋‹ซํž˜ ํƒœ๊ทธ: <img> โ†’ <img />
  • โ€ข ์ผ€๋ฐฅ ์ผ€์ด์Šค โ†’ ์นด๋ฉœ ์ผ€์ด์Šค: stroke-width โ†’ strokeWidth

์ง€์›ํ•˜๋Š” ์†์„ฑ ๋ณ€ํ™˜

  • โ€ข HTML ์†์„ฑ: class, for, readonly, maxlength, autocomplete
  • โ€ข SVG ์†์„ฑ: stroke-width, stroke-linecap, fill-opacity
  • โ€ข ์ˆซ์ž ์†์„ฑ: ๋”ฐ์˜ดํ‘œ ์ œ๊ฑฐ ํ›„ ์ค‘๊ด„ํ˜ธ๋กœ ๊ฐ์‹ธ๊ธฐ
  • โ€ข ๋ถˆ๋ฆฐ ์†์„ฑ: aria-hidden="true" โ†’ aria-hidden=""
  • โ€ข ๋ณด์กด ์†์„ฑ: data-*, aria-* (์ผ€๋ฐฅ ์ผ€์ด์Šค ์œ ์ง€)

์™„์ „ํ•œ HTML ๋ฌธ์„œ ์ง€์›

  • โ€ข DOCTYPE, html, head, body ํƒœ๊ทธ ์ฒ˜๋ฆฌ
  • โ€ข meta, title, style ํƒœ๊ทธ ๋ณ€ํ™˜
  • โ€ข SVG ์š”์†Œ์™€ ์†์„ฑ ์™„์ „ ์ง€์›
  • โ€ข CSS ์Šคํƒ€์ผ ๋ธ”๋ก ๋ณด์กด