React | Lifecycle

joonsikyangยท2020๋…„ 3์›” 2์ผ
7

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
์‹ค๋ ฅ, ์‹ฌ๋ ฅ, ์ฒด๋ ฅ, ์˜๋ ฅ์˜ ๊ท ํ˜•์žˆ๋Š” ์„ฑ์žฅ์„ ์ถ”๊ตฌํ•ฉ๋‹ˆ๋‹ค.

3๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2020๋…„ 3์›” 8์ผ

์ค€์‹๋‹˜์งฑ

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2020๋…„ 3์›” 8์ผ

ํผ๊ฐ€์š”~โ™ก

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2020๋…„ 11์›” 12์ผ

๊ฐ“์ค€์‹

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ