230503(μ)
π μ±μ₯μΌμ§ 4.0
μ±
ν볡ν μ΄κΈ°μ£Όμμ(μ¨μΈ λ€μ΄μ΄)
μ λ΄μ©μ μκ·Ήλ°μ μμνλ μλ°ν μ±μ₯κΈ°λ‘
μ΄μμλ κ½κ³Ό μ£½μ κ½μ μ΄λ»κ² ꡬλ³νλκ°?
μ±μ₯νκ³ μλ κ²μ΄ μ΄μ μλ κ²μ΄λ€.
μλͺ μ μ μΌν μ¦κ±°λ μ±μ₯μ΄λ€!
π³ (1.0)ν€μλ
μ΅λν κ°λ¨νκ² μ 리, μΆνμ 보면μ μ€μ€λ‘ μ€λͺ
π (2.0)κ²½ν μμ£Όλ‘
λ¨μ μ 보λ₯Ό μ λ¬νκΈ°λ³΄λ€ λ¬΄μμ λ°°μ κ³ μ΄λ»κ² ν΄κ²°νλμ§ μ§§κ³ κ°λ¨νκ² μμ±
βοΈ (3.0)μ ν΄μ§ ν νλ¦Ώμ λ§μΆ°μ
ν€μλ, κ²½ν λͺ¨λ μ’λ€. λ€λ§ λ§€μΌ μμ±νκΈ°λ‘ λ§μ λ¨Ήμλ§νΌ ν΅μ¬λ§ κ°κ²°νκ² μ 리ν μ μκ² ν νλ¦Ώμ μμ±
(3.1)230102λΆν° μμλλ νμ΅μ κ΄ν λ΄μ© μΆκ°
(3.2)230313λΆν° μ’λ κ²½ν, κ°μ μμ£Όμ λ΄μ©λ λ΄κΈ°!
πΎ (4.0)νμ΅ ν€μλμμ μ΅λν κ°λ¨ν μ 보 μ 곡, κ³ λ―Όμμ λ΄ κ²½νμ μμΈν μ μ!
π μ€λμ νμ΅ ν€μλ
κ°λ¨ν react todo app λ§λ€κΈ°
κ°μμμ λμ€λ νλ‘μ νΈ μ€ νλμ§λ§, κ°μλ₯Ό νλλ λ³΄μ§ μκ³ κ΅¬νν΄λ³΄μλ€. κ·Έλ¬κ³ λμ κ°μλ₯Ό 보면μ 리ν©ν λ§μ νλλ°, μμλ μ²μ λ΄κ° μ§ μ½λλ λ€μ μ§μ λΆνλ€. κ·ΈλΌμλ 리ν©ν λ§νλ©΄μ λ ν¨μ‘μ μΈ λ°©λ², λ 보기 μ’μ λ°©λ²μΌλ‘ μ½λλ₯Ό μ 리νλ κ² λ무 μ¬λ―Έμκ³ ν₯λ―Έλ‘μ λ€. μ€λ λνμ μΌλ‘ κΉλνλ€κ³ λλ 건 λΆλͺ¨ μ»΄ν¬λνΈμμ νΉμ setState ν¨μλ₯Ό μ λ¬νλ λ°©λ²μΈλ° κ°λ¨ν μμλ₯Ό λ€λ©΄ μλμ κ°λ€.
λ΄κ° μμ±νλ λ°©μμ μλμ κ°λ€.
function Parent() {
const [state, setState] = useState(false);
return <Child setState={setState} />;
}
function Child() {
return (
<button
onClick={() => {
setState(prev => !prev);
}}
>
Click
</button>
);
}
κ·Έλ¦¬κ³ μ΄λ₯Ό μ’λ 리ν©ν λ§ν λ°©μμ μλμ κ°λ€.
function Parent() {
const [state, setState] = useState(false);
const handleState = () => {
setState((prev) => !prev);
}
return <Child onClick={handleState} />;
}
function Child ({onClick}) {
return (
<button onClick={onClick}>
Click
</button>
);
}
μ λ§ λ³κ±° μλ κ±° κ°μ§λ§, React Componentμλ on
μΌλ‘ μμνλ ν¨μ propsλ‘ μ λ¬νλ ν¨μ¬ 보기 νΈνκ³ μμ μ μΈ λλμ΄ λ λ€.
λν, stateλ₯Ό κ΄λ¦¬νλ λΆλΆλ λΆλͺ¨ μ»΄ν¬λνΈμμ κ΄λ¦¬νκ³ , μμ μ»΄ν¬λνΈμμλ κ·Έλ₯ μ λ¬λ°μ ν¨μλ₯Ό μ€ννλ κ²λ§μΌλ‘λ stateλ₯Ό κ΄λ¦¬ν μ μλ€λ μ μ΄ λ무 μ’μλ€.
π μ€λμ κ³ λ―Ό ν€μλ
νκ΅μ΄ onKeyDown μ λ§μ§λ§ κΈμμ λν΄ μ΄λ²€νΈκ° 2λ² λ°μνλ μ΄μ
κ°λ° 곡λΆλ₯Ό νλ©΄μ λλΌλ건λ°, μ΄μ λ μ΄κ² ν΄κ²°μ΄ λ κΉ?
νλ μκ°μ‘°μ°¨λ λ€μ§ μκ² λμλ€. κ·Έλ₯ λ¬Έμ κ° μκΈ°λ©΄ μ΄λ»κ² ν΄κ²°ν μ μμΌλ €λ?
νλ μκ°λ§ λ λ€. ν΄κ²°νλλ°
μΌλ§λ μκ°μ΄ κ±Έλ¦¬κ³ μΌλ§λ ν¨μ¨μ μΌλ‘ ν μ μμμ§λ λͺ¨λ₯΄μ§λ§, λ°λμ ν΄κ²°ν μ μλ€λ λ―Ώμ? μμ κ°?μ΄ μκ²Όλ€κ³ ν΄μΌνλβ¦ μνΌ κ·Έλ° κ² μκ²Όλ€.
μ€λμ μ΄μλ μ½κ° κ·Έλ° λ¬Έμ μλλ°, κ²°κ΅ μ°Ύκ³ μ°Ύλ€λ³΄λ ν΄κ²°ν μ μμλ€. μμΈν 건 μ΄ κΈμ μ°Έμ‘°νκΈ°!
π μμ½ λ° ν루 κ°λ¨ νκ³
κ°λ°μ΄ μ°Έ μ¬λ―Έμλ€. μλ©΄ μμλ‘ μ¬λ―Έμκ³ λ μνκ³ μΆκ³ μμ¬μ΄ λλ€. μμ§ν μ‘체μ μΈ νΌλ‘λ μμ§λ§, κ°λ° 곡λΆλ₯Ό ν λ μ μ μ μΈ νΌλ‘λ μλμ μΌλ‘ λν κ² κ°λ€.(νμλ¦¬μΌ μλ μλ€. γ γ γ γ γ ) κ·Έλλ νμ€ν 건 λ§€μΌ κ°λ° μκ°μ΄ λκ³ λ§€μΌ κ°λ°μ νκ³ μκ³ λ§€μΌ κ°λ°μ νκ³ μΆλ€λ κ²μ΄λ€. λ무 μλλ₯΄μ§λ§κ³ μ²μ²ν λ΄κ° μνλ λͺ¨μ΅μ μΆμ λ μ€ννλ©΄μ λμκ°μΌλ©΄ μ’κ² λ€. μ λ§ μ λ§ μνκ³ μλ€.
μ€λμ μν μ
- κ±°μ μ¬μ§ μκ³ λͺ°μ ν΄μ 곡λΆν μ
μ€λμ μμ¬μ΄ μ
- κ³ννλ§νΌ λ€ λͺ»ν μ β¦ => μμ¦ μ΄κ² κ³μ λ±μ₯νλλ°, μ΄λ»κ² κ°μ ν μ μμκΉ?
- μ λ§ λ± ν μ μλ κ³νλ€λ§ μ μ΄λ λ³ΌκΉ..? λ무 무리νμ§ λ§κ³ ..?