230407(κΈ)
π μ±μ₯μΌμ§ 4.0
μ±
ν볡ν μ΄κΈ°μ£Όμμ(μ¨μΈ λ€μ΄μ΄)
μ λ΄μ©μ μκ·Ήλ°μ μμνλ μλ°ν μ±μ₯κΈ°λ‘
μ΄μμλ κ½κ³Ό μ£½μ κ½μ μ΄λ»κ² ꡬλ³νλκ°?
μ±μ₯νκ³ μλ κ²μ΄ μ΄μ μλ κ²μ΄λ€.
μλͺ μ μ μΌν μ¦κ±°λ μ±μ₯μ΄λ€!
π³ (1.0)ν€μλ
μ΅λν κ°λ¨νκ² μ 리, μΆνμ 보면μ μ€μ€λ‘ μ€λͺ
π (2.0)κ²½ν μμ£Όλ‘
λ¨μ μ 보λ₯Ό μ λ¬νκΈ°λ³΄λ€ λ¬΄μμ λ°°μ κ³ μ΄λ»κ² ν΄κ²°νλμ§ μ§§κ³ κ°λ¨νκ² μμ±
βοΈ (3.0)μ ν΄μ§ ν νλ¦Ώμ λ§μΆ°μ
ν€μλ, κ²½ν λͺ¨λ μ’λ€. λ€λ§ λ§€μΌ μμ±νκΈ°λ‘ λ§μ λ¨Ήμλ§νΌ ν΅μ¬λ§ κ°κ²°νκ² μ 리ν μ μκ² ν νλ¦Ώμ μμ±
(3.1)230102λΆν° μμλλ νμ΅μ κ΄ν λ΄μ© μΆκ°
(3.2)230313λΆν° μ’λ κ²½ν, κ°μ μμ£Όμ λ΄μ©λ λ΄κΈ°!
πΎ (4.0)νμ΅ ν€μλμμ μ΅λν κ°λ¨ν μ 보 μ 곡, κ³ λ―Όμμ λ΄ κ²½νμ μμΈν μ μ!
π μ€λμ νμ΅ ν€μλ
κ³ λ―Ό μ¬ν
1. λΆλͺ¨ μ»΄ν¬λνΈμ λΆμ΄μλ nodeλ₯Ό state λ³κ²½μ λ°λΌ λ€μ λλλ§ν΄μ£ΌκΈ°
constructor(props?: Props) {
this._model = new MainModel();
this._view = new MainView();
const state = {};
this.setState(state);
const mainRight = new MainRightComponent();
this.element.appendChild(mainRight.element); // A
mainRight.setState({ title: 123 });
this.element.appendChild(mainRight.element); // B
}
μμ μ½λμμ Bμ²λΌ λ€μ λΆμ΄λ κ² μλλΌ, μ΄λ―Έ Aμμ λΆμΈ λ€μ state λ³κ²½μ λ°λΌ λλλ§μ΄ λ€μ λκ² ν΄μΌνλλ°..! μ΄λ»κ² νλ©΄ μ’μμ§ κ³ λ―Ό μ€. μ΄λ΄ λ μ΅μ λ² ν¨ν΄μ μ μ©νλ..?
μμ§λ ν΄κ²°μ λͺ»νλ€γ
γ
log μ°μΌλ©΄μ κ³μ νμΈ μ€..!
π μμ½ λ° ν루 κ°λ¨ νκ³
μκ°λ³΄λ€ κΈλ°© ν΄κ²°λ μ€ μμλ μ½λκ° ν΄κ²°μ΄ μλμ΄μ λͺμκ°μ΄λ 머리 μΈλ§€λ μ€β¦ μ€λλ μ λ μ½μμ λ€λ μμ ν΄κ²°ν΄λ³΄λ €κ³ μ΄λ κ² λ ΈνΈλΆ μμ μμλ€. μ΄κ±° μκ°λ§ λλ ν루μλ€.
μ€λμ μν μ
- λκΉμ§ ν΄κ²°ν΄λ³΄λ €κ³ λ Έλ ₯ν μ
μ€λμ 보μν μ
- μ΄λ»κ²λ ν΄κ²°λ°©λ²μ μ°Ύμλ΄κΈ°
μ°Έκ³
- μμ