๐ก 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) ์ผ๋ก ์ด๋ฃจ์ด์ง๋ค.
์ปดํฌ๋ํธ์ ์ธ์คํด์ค๊ฐ ์์ฑ๋์ด 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()
์ด๋ฏธ 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()
๋ง์ดํธ์ ๋ฐ๋ ๊ณผ์ . ์ปดํฌ๋ํธ๊ฐ DOM์์ ์ ๊ฑฐ๋๋ ๊ฒ
unmount ๋จ๊ณ์ class component์์๋ componentWillUnmount() method๊ฐ ํธ์ถ๋๋ค.