โœ๐Ÿผ ๋ฆฌ์•กํŠธ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ ํ•œ ์ค„ ์ •๋ฆฌ!

๋งˆ์šดํŠธ

  • constructor: ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ์ž ๋ฉ”์„œ๋“œ
  • getDerivedStateFromProps: props๋กœ ๋ฐ›์•„์˜จ ๊ฒƒ์„ state์— ๋„ฃ์–ด์ค„ ๋•Œ ์‚ฌ์šฉ
  • render: ๋ Œ๋” ๋ฉ”์„œ๋“œ
  • componentDidMount: ์ฒซ ๋ Œ๋”๋ง์ด ์ข…๋ฃŒ๋œ ํ›„ ํ˜ธ์ถœ๋˜๋Š” ๋ฉ”์„œ๋“œ (DOM์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์—ฐ๋™ํ•˜๊ฑฐ๋‚˜, ajax ์š”์ฒญ, ํ˜น์€ DOM์˜ ์†์„ฑ์„ ์ฝ๊ฑฐ๋‚˜ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋Š” ์ž‘์—… ์ง„ํ–‰)

์—…๋ฐ์ดํŠธ

  • getDerivedStateFromProps: props๋กœ ๋ฐ›์•„์˜จ ๊ฒƒ์„ state์— ๋„ฃ์–ด์ค„ ๋•Œ ์‚ฌ์šฉ
  • shouldComponentUpdate: ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋ ์ง€ ๋ง์ง€ ๊ฒฐ์ •ํ•˜๋Š” ๋ฉ”์„œ๋“œ (React.Memo์˜ ์—ญํ• ๊ณผ ์œ ์‚ฌ)
  • render: ๋ Œ๋” ๋ฉ”์„œ๋“œ
  • getSnapshotBeforeUpdate: ์—…๋ฐ์ดํŠธ ์ง์ „์˜ DOM์ƒํƒœ๋ฅผ ๊ฐ€์ ธ์™€ ํŠน์ • ๊ฐ’์„ ๋ฐ˜ํ™˜ (์Šคํฌ๋กค ์œ„์น˜ ๊ณ ์ •๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ ๊ตฌํ˜„์— ํ™œ์šฉ, Hooks์—๋Š” ์•„์ง ์ด ๋ฉ”์„œ๋“œ์— ํ•ด๋‹นํ•˜๋Š” hook์ด ์—†๋‹ค.)
  • componentDidUpdate: ๋ฆฌ๋ Œ๋”๋ง์„ ๋งˆ์น˜๊ณ  ํ™”๋ฉด์— ๋ณ€ํ™”๊ฐ€ ๋ฐ˜์˜๋œ ๋’ค ํ˜ธ์ถœ๋˜๋Š” ๋ฉ”์„œ๋“œ, ์„ธ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์œ„ ๋ฉ”์„œ๋“œ์—์„œ ๋ฐ˜ํ™˜ํ•œ ๊ฐ’ ์กฐํšŒ ๊ฐ€๋Šฅ

์–ธ๋งˆ์šดํŠธ

  • componentWillUnmount: ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์—์„œ ์‚ฌ๋ฆฌ์ง€๊ธฐ ์ง์ „์— ํ˜ธ์ถœ

์—๋Ÿฌ์ฒ˜๋ฆฌ

  • componentDidCatch: ์‚ฌ์ „์— ์˜ˆ์™ธ์ฒ˜๋ฆฌ๋ฅผ ํ•˜์ง€ ์•Š์€ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Œ์„ ์•Œ๋ ค์คŒ
  componentDidCatch(error, info) {
    console.log('์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.');
    console.log({
      error,
      info
    });
    this.setState({
      error: true
    });
  }

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ