[React] μ»΄ν¬λνΈ(Component)
π μ»΄ν¬λνΈ
μ»΄ν¬λνΈ(Component) : μ±μ κΈ°λ₯μ λ¨μλ³λ‘ μΊ‘μννλ Reactμ κΈ°λ³Έ λ¨μ
HTML μμλ₯Ό λ°ννλ ν¨μλ ν΄λμ€μ κ°λ€κ³ μκ°ν΄λ λλ€.
λ°λΌμ, μ»΄ν¬λνΈλ λ
립μ μ΄κ³ , μ¬μ¬μ© κ°λ₯ν μ½λμ μ‘°κ°μ΄λ€.
μ»΄ν¬λνΈμ μ’ λ₯λ‘λ, 1. ν¨μν μ»΄ν¬λνΈ, 2. ν΄λμ€ν μ»΄ν¬λνΈκ° μλ€.
π‘ ν¨μν μ»΄ν¬λνΈ
κ°λ¨ν μλ‘, ν¨μν μ»΄ν¬λνΈ ννλ₯Ό 보μ.
function Introduce() {
return <h2>Hi, I am elice!</h2>;
}
ReactDOM.render(<Introduce />, document.getElementById('root'));
π‘ ν΄λμ€ν μ»΄ν¬λνΈ
ν¨μν μ»΄ν¬λνΈμ λΉκ΅νμ λ, μ½κ° κ΅¬μ‘°λ§ λ€λ₯Έ μ λλ€.
λ€λ§, class μ μΈ μ, React.Componentμ λ©μλλ€μ μ¬μ©νκΈ° μν΄, extendsλ₯Ό μ΄μ©ν΄, React.Componentλ₯Ό μμ
render( ) ν¨μμμ, λ°ν ν , HTML μμλ₯Ό return μΌλ‘ λ°ν
κ°λ¨ν μλ‘, ν΄λμ€ν μ»΄ν¬λνΈ ννλ₯Ό 보μ.
class Introduce extends React.Component {
render() {
return <h2>Hi, I am elice!</h2>;
}
}
ReactDOM.render(<Introduce />, document.getElementById('root'));
π‘ μ΄ λμ κ°κ°, μΈμ μ¬μ©νλκ° ?
ν¨μν μ»΄ν¬λνΈ
- λ¨μν HTML UIλ₯Ό λ°ννλ κ°λ¨ν μλ°μ€ν¬λ¦½νΈ ν¨μλ‘ μμ£Ό μ¬μ©νλ€.
- λ¨μν, λ°μ΄ν°λ₯Ό λ°κ³ , λ λλ§ νλ©΄ λμ΄μ§ λλ¬Έμ, λΉμνν μ»΄ν¬λνΈλΌκ³ λ νλ€.
ν΄λμ€ μ»΄ν¬λνΈ
- ν΄λμ€ μ»΄ν¬λνΈλ, "μν(State)"λ₯Ό ꡬνν λ μ¬μ©νλ€.
- μ¬κΈ°μ, "μν(State)"λ, Reactμ Stateλ₯Ό μλ―Ένλ©°, μ½κ² λ§νλ©΄, μ»΄ν¬λνΈμ νμ¬ μ μ₯λ κ°
- μ΄λ°, "μν(State)"λ₯Ό κ°μ§λ, ν΄λμ€ μ»΄ν¬λνΈλ₯Ό, λ€λ₯Έ λ§λ‘, μνν μ»΄ν¬λνΈλΌκ³ λ νλ€.
- HTMLμ λ°ννλ render( ) λ©μλκ° κ΅¬νλμ΄, 볡μ‘ν UI λ‘μ§μ ꡬνν λ ν΄λμ€ν μ»΄ν¬λνΈλ₯Ό μ¬μ©νλ€.
- νΉν, Stateλ₯Ό μ¬μ©ν λ, λ°λμ(?) ν΄λμ€ν μ»΄ν¬λνΈλ‘ ꡬνμ΄ λμ΄μΌ νλ€.
κ·Έλ¬λ, κΈ°μ μ΄ λ°λ¬ λλ©΄μ, μ΄μ λ, μ¬μ€, ν΄λμ€ μ»΄ν¬λνΈμμλ§, λ€λ£° μ μλ, μ»΄ν¬λνΈμ μν(State)λ₯Ό, ν¨μν μ»΄ν¬λνΈμμλ λ€λ£° μ μκ² λμκ³ , κ·Έλ¬ν κΈ°μ μ μ°λ¦¬λ, "ν (hook)" μ΄λΌκ³ νλ€.
μ΄κ²μ, λ€μμ μ€λͺ νλ €κ³ νλ€. ( μμ£Ό μ€μνκΈ° λλ¬Έ ! )
κ·Έλ¦¬κ³ , μμ¦μ μ¬μ€, ν΄λμ€ν μ»΄ν¬λνΈλ³΄λ¨, hookμ μ΄μ©ν, ν¨μν μ»΄ν¬λνΈλ‘ Reactλ₯Ό ꡬννλ κ²μ΄ μΆμΈλΌκ³ νλ€.