Cannot read property '0' of undefined π€¬
Mockup λ°μ΄ν°λ₯Ό ꡬμ±νμ¬ importνκ±°λ νλ‘μ νΈκ° μμλκ³ λ°±μλ APIλ₯Ό λΆμ΄κΈ° μμνλ©΄μ μμ£Ό μ§λ¬Ένλ μλ¬ μ€ νλμ
λλ€.
μ΄ μλ¬λ Component Lifecycleκ³Ό κ΄λ ¨μ΄ μλλ°, μ΄λ² κΈμμλ Component Lifecycleκ³Ό μ΄λ‘ μΈν΄ λ°μνλ μλ¬μ μμΈκ³Ό ν΄κ²° λ°©λ²μ λν΄ μμλ³΄κ² μ΅λλ€.
Lifecycle
- μ°μ κΈ°λ³Έμ μΈ Lifecycle λ©μλ μ€ν μμμ λν΄ μμλ³΄κ² μ΅λλ€.
- μμ μ½λ μ€ν κ²°κ³Ό μ½μμ μ°ν νλ©΄μ
λλ€.
π Lifecycle κΈ°λ³Έ μμ
- constructor
- render
- componentDidMount
- (fetch μλ£)
- render
- (setState)
- componentDidUpdate (setState λμκΈ° λλ¬Έμ μ»΄ν¬λνΈ μ
λ°μ΄νΈ λ°μ)
π μ΄ μμλ₯Ό κΌ κΈ°μ΅ν΄μ£ΌμΈμ! μ΄ μμλ‘ μΈν΄ λ°μνλ μλ¬λ₯Ό νλμ© μ΄ν΄λ³΄λλ‘ νκ² μ΅λλ€.
π₯ μ°Έκ³ ) fetchλ‘ λΆλ¬μ€λ λ°μ΄ν°λ μλμ κ°μ΄ μκ²Όμ΅λλ€.
{
"data": [{ "index": 1, "name": "joon" }]
}
1. render ν¨μ μμ this.state.data
- νλ©΄μ μλ¬ μμ΄ κ²°κ³Όκ° μ λνλ©λλ€.
- μ²μ render ν¨μκ° μ€νλ λλ componentDidMount μ΄μ , μ¦ setStateλκΈ° μ μ΄κΈ° λλ¬Έμ this.state.dataκ° λΉ λ°°μ΄λ‘ μ°νλ κ²μ νμΈν μ μμ΅λλ€.
- componentDidMount μ΄ν, μ¦ setState μ΄νμ render ν¨μμμλ this.state.dataκ° λ°μ΄ν°μμ λ°μ λ°°μ΄μ μ λ°μνμ¬ λμ€λ κ²μ νμΈν μ μμ΅λλ€.
- κ·ΈλΌ μ΄λ²μλ λ°μ΄ν° μμ κ°μ²΄μ μ’ λ μ κ·ΌνκΈ° μν΄ this.state.dataκ° μλ this.state.data[0]μ μ½μμ μ°μ΄λ³΄λλ‘ νκ² μ΅λλ€.
2. render ν¨μ μμ this.state.data[0]
- μ΄λ²μλ νλ©΄μ μλ¬ μμ΄ κ²°κ³Όκ° μ λνλ©λλ€.
- this.state.dataκ° λΉ λ°°μ΄μΈ κ²½μ°μλ this.state.data[0] μ κ·Έλ₯ undefinedλ‘ λμ€κΈ° λλ¬Έμ μλ¬κ° λ°μνμ§ μκ³ κ·Έ λ€μμ componentDidMount ν¨μκ° μ€νλλ κ²μ λ³Ό μ μμ΅λλ€.
- κ·ΈλΌ μ΄λ²μλ λ°μ΄ν° μμ κ°μ²΄μ name valueμ μ κ·ΌνκΈ° μν΄ this.state.data[0]μ΄ μλ this.state.data[0].name μ μ½μμ μ°μ΄λ³΄λλ‘ νκ² μ΅λλ€.
3. render ν¨μ μμ this.state.data[0].name
- Cannot read property 'name' of undefined π€¬
- μλ¬κ° λ°μνλ€μ! μ κ°μκΈ° μ΄λ¬λμ§ μ΄ν΄λ³΄κ² μ΅λλ€.
- constructor
- render
- console.log("render") >>> λ¬Έμ μμ
- console.log(this.state.data[0].name) >>> π₯μλ¬ λ°μ
- λΉ λ°°μ΄μΈλ° μ΄λ»κ² nameμ΄λΌλ ν€ κ°μ κ°μ§ μ μμκΉμ?
- λΉ λ°°μ΄μ 0λ²μ§Έ index, μ¦ this.state.data[0] μ undefinedμ΄κΈ° λλ¬Έμ μμ κ°μ μλ¬κ° λ°μνκ² λ©λλ€.
β ν΄κ²°λ°©λ²
AND μ°μ°μ(&&)λ₯Ό μ¬μ©ν μ‘°κ±΄λΆ λ λλ§
- νΉμ 쑰건μ λ§μ‘±ν λ λ΄μ©μ 보μ¬μ£Όκ³ , λ§μ‘±νμ§ μμ λ μ무κ²λ λ λλ§νμ§ μμμΌ νλ μν©μμλ μ‘°κ±΄λΆ μ°μ°μλ₯Ό ν΅ν΄ ꡬνν μ μμ΅λλ€.
- μ½λλ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€.
- λΉ¨κ°μ νμλ λΆλΆμ ν΄μν΄λ³΄λ©΄ "this.state.data[0] μ΄ true μΈ κ²½μ°μλ§ this.state.data[0].nameμ λ λνκ² λ€" λΌλ λ» μ
λλ€.
- μ΄λ κ² λ°μ΄ν°λ₯Ό λ°μμ 무쑰건 λ λλ§ νλ κ²μ΄ μλλΌ, 쑰건μ κ±Έμ΄μ λ΄κ° μνλ λ°μ΄ν°κ° μλ κ²½μ°μλ§ λ λλ§μ μμΌμ£Όλ λ°©λ²μΌλ‘ μλ¬λ₯Ό ν΄κ²°ν μ μμ΅λλ€.
λΆλͺ¨ - μμ λ°μ΄ν° μ λ¬ μ λ°μνλ μ€λ₯
- λ€μμ μ΄μ κ΄λ ¨ν΄μ μμ£Ό λ°μνλ μ€λ₯λ₯Ό νλ λ 보λλ‘ νκ² μ΅λλ€.
- λΆλͺ¨κ° APIμμ λ°μ λ°μ΄ν°λ₯Ό μμμκ² props κ°μΌλ‘ μ λ¬νμ¬ μμ λ΄λΆμμ κ·Έ λ°μ΄ν°μ μ κ·Όνμ¬ μ¬μ©νλ κ²½μ°μ
λλ€.
- μ리λ μμμ λ³Έ λ΄μ©κ³Ό κ°μ΅λλ€.
- μ½λλ₯Ό λ¨Όμ λ³΄κ³ λΆλͺ¨ - μμ Lifecycle μμλ₯Ό λ¨Όμ νμΈν΄λ³΄λλ‘ νκ² μ΅λλ€.
π λΆλͺ¨ - μμ Lifecycle μμ
- λΆλͺ¨ constructor
- λΆλͺ¨ render (λΆλͺ¨ render μμ μλ μμ μ»΄ν¬λνΈλ‘ λμ΄κ°)
- μμ constructor
- μμ render
- μμ componentDidMount (μ¬κΈ°κΉμ§ νκ³ λΆλͺ¨ μ»΄ν¬λνΈλ‘ λ€μ λμ΄κ°)
- λΆλͺ¨ componentDidMount
- λΆλͺ¨ fetch μλ£ (setState λ°μ > μ
λ°μ΄νΈ λ°μ > λ€μ render)
- λΆλͺ¨ render (λΆλͺ¨ render μμ μλ μμ μ»΄ν¬λνΈλ‘ λμ΄κ°)
- μμ render
- μμ componentDidUpdate
(componentDidMountλ μ΅μ΄ λ λ μ ν λ²λ§ μ€νλκΈ° λλ¬Έμ componentDidUpdate λ°μ. μ¬κΈ°κΉμ§ νκ³ λ€μ λΆλͺ¨λ‘ λμ΄κ°.)
- λΆλͺ¨ componentDidUpdate
(componentDidMountλ μ΅μ΄ λ λ μ ν λ²λ§ μ€νλκΈ° λλ¬Έμ componentDidUpdate λ°μ)
- κ·ΈλΌ μλ¬λ₯Ό λ°μμν€λλ‘ νκ² μ΅λλ€.
- μ μλ¬κ° λ°μνλμ§ μμκ² μ£ ?π λ§μ°¬κ°μ§λ‘ ν΄κ²° λ°©λ² μ΄ν΄λ³΄κ² μ΅λλ€.
- μμ λ΄λΆμμ μ‘°κ±΄λΆ λ λλ§μ νμ©νμ¬ μλ¬ λ¬Έμ λ₯Ό ν΄κ²°νμ΅λλ€π
μ€μλ짱