โ๐ผ ๋ฆฌ์กํธ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋ ํ ์ค ์ ๋ฆฌ!
๋ง์ดํธ
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
});
}
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(โ๐ผ ๋ฆฌ์กํธ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋ ํ ์ค ์ ๋ฆฌ!), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@9rganizedchaos/๋ฆฌ์กํธ-์๋ช ์ฃผ๊ธฐ-๋ฉ์๋-ํ-์ค-์ ๋ฆฌ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค