React | Lifecycle

joonsikyangΒ·2020λ…„ 3μ›” 2일
14

React | Session Materials

λͺ©λ‘ 보기
3/4
post-thumbnail

Cannot read property '0' of undefined 🀬

Mockup 데이터λ₯Ό κ΅¬μ„±ν•˜μ—¬ importν•˜κ±°λ‚˜ ν”„λ‘œμ νŠΈκ°€ μ‹œμž‘λ˜κ³  λ°±μ—”λ“œ APIλ₯Ό 뢙이기 μ‹œμž‘ν•˜λ©΄μ„œ 자주 μ§ˆλ¬Έν•˜λŠ” μ—λŸ¬ 쀑 ν•˜λ‚˜μž…λ‹ˆλ‹€.

이 μ—λŸ¬λŠ” Component Lifecycleκ³Ό 관련이 μžˆλŠ”λ°, 이번 κΈ€μ—μ„œλŠ” Component Lifecycleκ³Ό 이둜 인해 λ°œμƒν•˜λŠ” μ—λŸ¬μ˜ 원인과 ν•΄κ²° 방법에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.

Lifecycle

  • μš°μ„  기본적인 Lifecycle λ©”μ†Œλ“œ μ‹€ν–‰ μˆœμ„œμ— λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.
  • μœ„μ˜ μ½”λ“œ μ‹€ν–‰ κ²°κ³Ό μ½˜μ†”μ— 찍힌 ν™”λ©΄μž…λ‹ˆλ‹€.

πŸš€ Lifecycle κΈ°λ³Έ μˆœμ„œ

  1. constructor
  2. render
  3. componentDidMount
  4. (fetch μ™„λ£Œ)
  5. render
  6. (setState)
  7. 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 🀬
  • μ—λŸ¬κ°€ λ°œμƒν–ˆλ„€μš”! μ™œ κ°‘μžκΈ° μ΄λŸ¬λŠ”μ§€ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.
  1. constructor
  2. 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 μˆœμ„œ

  1. λΆ€λͺ¨ constructor
  2. λΆ€λͺ¨ render (λΆ€λͺ¨ render μ•ˆμ— μžˆλŠ” μžμ‹ μ»΄ν¬λ„ŒνŠΈλ‘œ λ„˜μ–΄κ°)
  3. μžμ‹ constructor
  4. μžμ‹ render
  5. μžμ‹ componentDidMount (μ—¬κΈ°κΉŒμ§€ ν•˜κ³  λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈλ‘œ λ‹€μ‹œ λ„˜μ–΄κ°)
  6. λΆ€λͺ¨ componentDidMount
  7. λΆ€λͺ¨ fetch μ™„λ£Œ (setState λ°œμƒ > μ—…λ°μ΄νŠΈ λ°œμƒ > λ‹€μ‹œ render)
  8. λΆ€λͺ¨ render (λΆ€λͺ¨ render μ•ˆμ— μžˆλŠ” μžμ‹ μ»΄ν¬λ„ŒνŠΈλ‘œ λ„˜μ–΄κ°)
  9. μžμ‹ render
  10. μžμ‹ componentDidUpdate
    (componentDidMountλŠ” 졜초 λ Œλ” μ‹œ ν•œ 번만 μ‹€ν–‰λ˜κΈ° λ•Œλ¬Έμ— componentDidUpdate λ°œμƒ. μ—¬κΈ°κΉŒμ§€ ν•˜κ³  λ‹€μ‹œ λΆ€λͺ¨λ‘œ λ„˜μ–΄κ°.)
  11. λΆ€λͺ¨ componentDidUpdate
    (componentDidMountλŠ” 졜초 λ Œλ” μ‹œ ν•œ 번만 μ‹€ν–‰λ˜κΈ° λ•Œλ¬Έμ— componentDidUpdate λ°œμƒ)
  • 그럼 μ—λŸ¬λ₯Ό λ°œμƒμ‹œν‚€λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

  • μ™œ μ—λŸ¬κ°€ λ°œμƒν–ˆλŠ”μ§€ μ•„μ‹œκ² μ£ ?😏 λ§ˆμ°¬κ°€μ§€λ‘œ ν•΄κ²° 방법 μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

  • μžμ‹ λ‚΄λΆ€μ—μ„œ 쑰건뢀 λ Œλ”λ§μ„ ν™œμš©ν•˜μ—¬ μ—λŸ¬ 문제λ₯Ό ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€πŸ™Œ

profile
μ‹€λ ₯, 심λ ₯, 체λ ₯, 영λ ₯의 κ· ν˜•μžˆλŠ” μ„±μž₯을 μΆ”κ΅¬ν•©λ‹ˆλ‹€.

관심 μžˆμ„ λ§Œν•œ 포슀트

4개의 λŒ“κΈ€

comment-user-thumbnail
2020λ…„ 3μ›” 8일

μ€€μ‹λ‹˜μ§±

λ‹΅κΈ€ 달기
comment-user-thumbnail
2020λ…„ 3μ›” 8일

νΌκ°€μš”~β™‘

λ‹΅κΈ€ 달기
comment-user-thumbnail
2020λ…„ 11μ›” 12일

갓쀀식

λ‹΅κΈ€ 달기
comment-user-thumbnail
2021λ…„ 5μ›” 11일

였 μ—­μ‹œ μ€€μ‹λ‹˜ 글이 λ„ˆλ¬΄ 잘 μ½ν˜€μš©πŸ‘πŸ» 😌

λ‹΅κΈ€ 달기