Lifecycle

zzi99ยท2021๋…„ 11์›” 30์ผ
0

React ๐Ÿ“š

๋ชฉ๋ก ๋ณด๊ธฐ
4/7
post-thumbnail

๐Ÿ“Œ ๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ์™€ ๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ ์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

9๊ฐ€์ง€์˜ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜๋‚˜์”ฉ ์‚ดํŽด๋ด…์‹œ๋‹ค..!

๋งˆ์šดํŠธ

๋งˆ์šดํŠธ๋ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ƒ๋ช…์ฃผ๊ธฐ ์ž…๋‹ˆ๋‹ค.

  • constructor
  • getDerivedStateFromProps
  • render
  • componentDidMount

constructor

  • constructorย ๋Š” ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ์„ฑ์ž ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งŒ๋“ค์–ด์ง€๋ฉด ๊ฐ€์žฅ ๋จผ์ € ์‹คํ–‰๋˜๋Š” ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.
constructor(props) {
    super(props);
    console.log("constructor");
}

getDerivedStateFromProps

  • getDerivedStateFromPropsย ๋Š”ย propsย ๋กœ ๋ฐ›์•„์˜จ ๊ฒƒ์„ย stateย ์— ๋„ฃ์–ด์ฃผ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋ ๋•Œ์™€ ์—…๋ฐ์ดํŠธ๋ ๋•Œ ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.
static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    return null;
}

render

  • ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.

componentDidMount

  • ์ปดํฌ๋„ŒํŠธ์˜ ์ฒซ๋ฒˆ์งธ ๋ Œ๋”๋ง์ด ๋งˆ์น˜๊ณ  ๋‚˜๋ฉด ํ˜ธ์ถœ๋˜๋Š” ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.

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

์—…๋ฐ์ดํŠธ๋ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ƒ๋ช…์ฃผ๊ธฐ ์ž…๋‹ˆ๋‹ค.

  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpdate

getDerivedStateFromProps

์œ„์—์™€ ๋™์ผ

shouldComponentUpdate

  • shouldComponentUpdateย ๋ฉ”์„œ๋“œ๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ํ• ์ง€ ๋ง์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.
shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    return true;
}

render

์œ„์—์™€ ๋™์ผ

getSnapshotBeforeUpdate

  • getSnapshotBeforeUpdateย ๋Š” render์—์„œ ๋งŒ๋“ค์–ด์ง„ ๊ฒฐ๊ณผ๋ฌผ์ด ๋ธŒ๋ผ์šฐ์ €์— ์‹ค์ œ๋กœ ๋ฐ˜์˜๋˜๊ธฐ ์ง์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.
  • ์ด ๋ฉ”์„œ๋“œ์—์„œ ๋ฐ˜ํ™˜ํ•œ ๊ฐ’์€ย componentDidUpdateย ํ•จ์ˆ˜์— ์„ธ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ์ธ snapshot ๊ฐ’์œผ๋กœ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return null;
}

componentDidUpdate

  • componentDidUpdateย ๋Š” ๋ฆฌ๋ Œ๋”๋ง์ด ๋งˆ์น˜๊ณ , ํ™”๋ฉด์— ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๋ณ€ํ™”๊ฐ€ ๋ชจ๋‘ ๋ฐ˜์˜๋˜๊ณ  ๋‚œ ๋’ค ํ˜ธ์ถœ๋˜๋Š” ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.
componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");
}

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

์–ธ๋งˆ์šดํŠธ์— ๊ด€๋ จ๋œ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋Š”ย componentWillUnmountย ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

componentWillUnmount

  • componentWillUnmountย ๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์—์„œ ์‚ฌ๋ผ์ง€๊ธฐ ์ง์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.
componentWillUnmount() {
    console.log("componentWillUnmount");
}

์—๋Ÿฌ

componentDidCatch

  • ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง ๋„์ค‘์— ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์˜ค๋ฅ˜ UI๋ฅผ ๋ณด์—ฌ์ค„์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.

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