[React] Component์˜ Lifecycle | Render, Mount, Update, Unmount

soyiยท2021๋…„ 4์›” 4์ผ
0

React ๋ฆฌ์•กํŠธ

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

๐Ÿš€ Component์˜ LifeCycle

๐Ÿ’ก Component์˜ Lifecycle์€, component๊ฐ€ ํ•˜๋‚˜์˜ ๋…ธ๋“œ๋กœ DOM์— ์˜ฌ๋ผ๊ฐ€๊ณ , ์ˆ˜์ •๋˜๊ณ , ๋‚ด๋ ค์˜ค๋Š” ๊ณผ์ •์œผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.
๐Ÿ‘‰ ์ฆ‰, "mounting" (adding nodes to the DOM), "unmounting" (removing them from the DOM), and "updating" (making changes to nodes already in the DOM) ์œผ๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค.


๐Ÿ“Œ Mount ๋งˆ์šดํŠธ

  • ์ปดํฌ๋„ŒํŠธ์˜ ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋˜์–ด DOM ์ƒ์— ์‚ฝ์ž…๋˜๋Š” ๊ฒƒ.
    ๋ฆฌ์•กํŠธ์—์„œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ํŠน์ • ์˜์—ญ์— ๋ผ์›Œ๋„ฃ๋Š” ํ–‰์œ„๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

  • ์˜ˆ๋กœ ReactDOM.render ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด์„œ DOM์˜ ํŠน์ • ์˜์—ญ์— ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ผ์›Œ ๋„ฃ์„ ์ˆ˜ ์žˆ๊ณ , ์ด๋Ÿฌํ•œ ๊ณผ์ •์„ ๋งˆ์šดํŠธํ•œ๋‹ค๊ณ  ํ‘œํ˜„ํ•œ๋‹ค.

  • < Rendering๊ณผ Mounting >
    ๐Ÿ‘‰ "Rendering" is any time a function component gets called or a class-based render method gets called which returns a set of instructions for creating DOM.
    ๐Ÿ‘‰ "Mounting" is when React "renders" the component for the first time and actually builds the initial DOM from those instructions.
    ๐Ÿ‘‰ ๋ Œ๋”๋ง์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ DOM์„ ๋งŒ๋“œ๋Š” ๋ช…๋ น๋“ค์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๋Š” ๊ฒƒ์„ ๋งํ•˜๊ณ , ๋งˆ์šดํŒ…์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ฒ˜์Œ์œผ๋กœ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.

  • mount ๋‹จ๊ณ„์˜ class component lifecycle methods
    1. constructor()
    2. static getDerivedStateFromProps()
    3. render()
    4. componentDidMount()


๐Ÿ“Œ Update ์—…๋ฐ์ดํŠธ

  • ์ด๋ฏธ mount ๋˜์–ด DOM์— ์กด์žฌํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ re-rendering ํ•˜์—ฌ ์—…๋ฐ์ดํŠธ ํ•˜๋Š” ๊ฒƒ. (์ƒˆ๋กœ mount ํ•˜๋Š” ๊ฒƒ ์•„๋‹˜.)

  • A "re-render" is when React calls the function component again to get a new set of instructions on an already mounted component. Re-renders just update the DOM but don't mount since mounting just happens once.

  • ์ปดํฌ๋„ŒํŠธ๋Š” ์•„๋ž˜์˜ ๋„ค ๊ฐ€์ง€ ๊ฒฝ์šฐ์— ์—…๋ฐ์ดํŠธ ๋œ๋‹ค.
    - props๊ฐ€ ๋ฐ”๋€” ๋•Œ
    - state๊ฐ€ ๋ฐ”๋€” ๋•Œ
    - ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง๋  ๋•Œ
    - this.forceUpdate๋กœ ๊ฐ•์ œ๋กœ ๋ Œ๋”๋ง์„ ํŠธ๋ฆฌ๊ฑฐํ•  ๋•Œ

  • update ๋‹จ๊ณ„์˜ class component lifecycle methods
    1. static getDerivedStateFromProps()
    2. shouldComponentUpdate()
    3. render()
    4. getSanphotBeforUpdate()
    5. componentDidUpdate()


๐Ÿ“Œ Unmount ์–ธ๋งˆ์šดํŠธ

  • ๋งˆ์šดํŠธ์˜ ๋ฐ˜๋Œ€ ๊ณผ์ •. ์ปดํฌ๋„ŒํŠธ๊ฐ€ DOM์—์„œ ์ œ๊ฑฐ๋˜๋Š” ๊ฒƒ

  • unmount ๋‹จ๊ณ„์˜ class component์—์„œ๋Š” componentWillUnmount() method๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค.



References

profile
ใƒพ(^โ–ฝ^*)))

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