JSX
νμ΅ ν€μλ
JSX
λ?Syntactic sugar
Reactμμ JSXλ₯Ό μ¬μ©νλ λͺ©μ
React.createElement
React Element
JSX
π JSXλ 무μμΈκ°?
JSX is an XML-like syntax extension to ECMAScript
JavaScriptμ XMLμ μΆκ°νμ¬ νμ₯λ λ¬Έλ²
JavaScript XMLμ μ€μλ§
곡μμ μΈ μλ°μ€ν¬λ¦½νΈ λ¬Έλ²μ μλλ€.
JSX νλμ νμΌμ μλ°μ€ν¬λ¦½νΈμ HTMLμ λμμ μμ± ν μ μλ€.
Reactμμλ§ μ¬μ©λλκ² μλλ©°, Vue.jsλ± λ€λ₯Έ νλ μμν¬μμλ μ¬μ© κ°λ₯νλ€.
π Syntactic sugarλ 무μμΈκ°?
λ¬Έλ²μ μΈ μ€ν
νλ‘κ·Έλλ° μΈμ΄ μ°¨μμμ μ 곡λλ λ Όλ¦¬μ μΌλ‘ κ°κ²°νκ² νννλ κ²
μ§κ΄μ μ΄μ§λ μμ§λ§ μ½λμ μμ μ€μ¬μ£Όλ κ²λ€μ Syntactic sugar λΌκ³ λΆλ₯Έλ€.
ES2015μμλ μ¬λ¬κ°μ§ Syntactic sugarκ° μΆκ° λμλ€κ³ νκ° λλ€. μλ‘ Class, κ°μ²΄λΆν΄, spread(...)
π Reactμμ JSXλ₯Ό μ¬μ©νλ λͺ©μ
JSXλ React.createElement(component, props, ...children)ν¨μλ₯Ό νΈμΆνκΈ° μν Syntactic sugarλ‘μ μν μ νλ€.
Reactμμ JSX μ¬μ©μ΄ νμλ μλλ©° λΉλ νκ²½μμ μ»΄νμΌ μ€μ μ νκ³ μΆμ§ μμ λ JSX μμ΄ Reactλ₯Ό μ¬μ©νλ©΄ νΈλ¦¬νλ€.
JSXλ‘ ν μ μλ λͺ¨λ κ²μ μμ JavaScriptλ‘λ ν μ μλ€.
π€ JSX μ΄λ»κ² μ¬μ©νλκ°? (feat.κΈ°λ³Έ κ·μΉ)
JavaScript ννμλ§μ
{}
μ€κ΄νΈ μμ λ£μ΄μ μ¬μ© ν μ μλ€.νκ·Έκ° κΌ λ«νμΌ νλ€.
1κ°μ μ΅μμμ νκ·Έκ° μ‘΄μ¬ν΄μΌνλ€.
<></> ,
React.Fragement
π React.createElement (JSX μμ΄ μ¬μ©νλ React)
JSXλ λΈλΌμ°μ μμ μ€ννκΈ° μν΄μ μΌλ°μ μΈ μλ°μ€ν¬λ¦½νΈ μ½λλ‘ λ³νν΄μΌ νλ€.
JSX β JavaScript μ½λλ‘ Babelμ ν΅ν΄ λ³ν νμ μ React.createElement λ₯Ό ν΅ν΄
React Element
λ₯Ό μμ± ν μ μλ€.
Example #1
Example #2
Example #3
π μ°Έκ³
Last updated