μ μΈκ°μ§ 보기 μ€ νλλΌλ ν΄λΉνλ©΄ stateλ‘ μ¬μ©νκΈ°μ λ¬΄λ¦¬κ° μλ€.
state
λ μ»΄ν¬λνΈ λ΄λΆμμ λ³ν μ μλ κ°μ΄κ³ ,
props
λ μΈλΆ(μμ μ»΄ν¬λνΈ)λ‘ λΆν° μ λ¬ λ°μ κ°μ΄λ€.
μ΄λ¦κ³Ό μ±λ³κ°μ΄ λ³νμ§ μλ κ°μ μ¬μ©νλ μΈλΆ(μμ μ»΄ν¬λνΈ)λ‘ λΆν° μ λ¬ λ°μ μ»΄ν¬λνΈμ μμ±μ μλ―Ένλ€.
μ΄λ ν κ°λ μ λ¬ν μ μλλ‘ propsλ κ°μ²΄ ννμ΄λ€.
propsλ μ½κΈ° μ μ©μ΄λ€.
propsλ μ΄λ¦ μ±λ³κ³Ό κ°μ΄ μ λ¬λ°μ λ³νμ§ μλ κ°μ΄λ€.
νμ μ»΄ν¬λνΈμ μ λ¬νκ³ μ νλ κ°κ³Ό μμ±μ μ μνλ€.
propsλ₯Ό μ΄μ©ν΄ 1. μμ μ μν κ° μμ±μ μ λ¬νλ€.
props λ°μ΄ν° μ λ¬λ²μΌλ‘ μμ μ»΄ν¬λνΈμμ νκ·Έμ μμ± κ°μΌλ‘ λ겨주λ λ°©λ²λ μμ§λ§, μ»΄ν¬λνΈμ νκ·Έ μ¬μ΄μ μ λ ₯νλ κ²λ μ λ¬ν μ μλ€.
<Comp>something</Comp>
μ΄λ° μμΌλ‘ μ λ¬νμλ, somethingμ Comp μ»΄ν¬λνΈ λ΄μμ props κ°μ²΄μ children μ΄λΌλ ν€μ ν λΉλλ€.
리μ‘νΈμ μ΄λ²€νΈ μ²λ¦¬λ DOM λ°©μκ³Ό μ μ¬νλ λͺκ°μ§ λ¬Έλ²μ μΈ μ°¨μ΄κ° μλ€.
DOM // <button onclick='eventHandler()'>event</button>
JSX // <button onClick={eventHandler}>event</button>
μ
λ ₯λμ κ°μ e.target.value
λ‘ κ°μ Έμμ stateμ ν λΉν μ μλ€.
μ
λ νΈ νκ·Έλ λλ‘ λ€μ΄ λͺ©λ‘μΌλ‘ μ νν μ μλ μ΅μ
μ΄ λμ€κ³ , select
νκ·Έμ onClick
μ΅μ
μ λκ³ μ΄λ²€νΈ νΈλ€λ¬ ν¨μλ₯Ό μ€μ νλ κ²μΌλ‘ e.target.value
λ₯Ό νΉμ ν μ μλ€.
μ ννλ λͺ©λ‘μ select
νκ·Έμ νμμ option
νκ·Έλ₯Ό λ§λλ κ²μΌλ‘ μμ±νλ€.
리μ‘νΈλ top-down, μ¦ μμμμ μλλ‘ λ¨ λ°©ν₯ λ°μ΄ν° νλ¦μ λ°λ₯Έλ€.
νλ‘μ€ μ¬μ©ν λ λ°°μ΄μ 보λΌκ±΄μ§ κ°μ²΄λ₯Ό 보λΌκ»μ§ κ΄νΈ κ΅¬λΆ νμ€νκ² ν΄μ 보λ΄μ€μΌνλ€.
μ€ν μ΄νΈ κ°μ κ°μ²΄ μμ λ£μλ κ°μ²΄ μμμ 컬μ 리ν°λ΄ μ°μ§λ§λΌ.
νμμ΄νμΌλ‘ 리μ‘νΈ μ€νλ¦°νΈλ₯Ό μλ£νλ€.
리μ‘νΈ μ€νλ¦°νΈλ₯Ό νλ©° 리μ‘νΈλ μ‘°κΈ λ μΉν΄μ‘λ€.
stateμ props λ₯Ό μ¬μ©ν΄ κ°μ λ³κ²½νκ³ μ μ₯νλ©° νμ μ»΄ν¬λνΈλ‘ 보λ΄λ λ°©λ²μ μ΅νλ€.
μ€λλ λ무 λμμ μ€νμ μ§μ€μ λͺ»νλ€.
λ΄μΌ μμ΄μ»¨ μκΉ
리μ‘νΈ μ€ν μ΄νΈμ νλ‘μ€ μμ£Όλ‘ νμ΅νλ λ μ΄μλ€.
μν 미리 μ ννμ΅μ ν΄λμ μ€λ μ΅νλλ° μ λ‘μ¬νμ΄ μμμ§, λ§μ½ μ²μλΆν° 머리 λ°μΌλ©° λ°°μ μΌλ©΄ κ³Όλ€ μΆνλ‘ λ¦¬νμ΄μ΄ νμμ§λ λͺ¨λ₯΄κ² λ€.
μ΄λμ μ ννμ΅μ΄ μ€μνλ°, ν루 λ°°μ΄κ±° μ 리νλ©΄ μ ννμ΅ν μκ°μ΄ μμ΄μ Έλ²λ¦¬λ μμ ~
κ·Έλλ μμ μ΅νλ μκ°μ΄ μ£ΌλΌ μ’ μ¬μ λ‘κ² κ³΅λΆν μ μλ κ² κ°λ€.
λκ° μ§κΈ μ¬μ λ‘μ°λ©΄ μλ ν
λ°
κ·Έλ¦¬κ³ μ€λλ μ΄ λ―ΈμΉ κ³μ λμ μ°¬μ‘°λ‘ μ€νλ₯Ό κ±°μ λ 리λ€μνΌ νλ€.
κ·Έλλ λ΄μΌμ΄λ©΄ μ΄ λ―ΈμΉ κ³μ λμ μμκ·μμ λ²μ΄λ μ μλ λ¬Έλͺ
μ μ΄κΈ°, μμ΄μ»¨λμ΄ μ€λ λ€νμ΄λ€.
μ¬λ¦μ μ§μ₯μ΄λ€.
πλ΄μΌλ νμ΄ν ν΄μ π