React.PureComponent๋ React.Component์ ์์ ํ ๋์ผํ์ง๋ง, PureComponent๋ shouldComponentUpdate()
๋ฉ์๋๋ฅผ ํตํ ๋ ๋๋ง ์ฌ๋ถ๋ฅผ ์๋์ผ๋ก ์ฒ๋ฆฌํด ์ฃผ๋ ๊ฒ์ด ๋ค๋ฆ
๋๋ค.
*PureComponent
๋ props๋ state๊ฐ ๋ณ๊ฒฝ๋ ๋, ์์ ๋น๊ต(shallow comparison)
๋ฅผ ํตํด ๋ ๋ค ๋น๊ตํ์ฌ ์
๋ฐ์ดํธ ์ฌ๋ถ๋ฅผ ์๋์ผ๋ก ํ๋จํ์ฌ shouldComponentUpdate() ์์ ๋ค์ ๋ ๋๋ง๋ฉ๋๋ค.*
๋ฐ๋ฉด, Component
๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํ์ฌ props์ state๋ฅผ ๋ค์ ๊ฐ๊ณผ ๋น๊ตํ์ง ์์ต๋๋ค. state, props์ ๋ณ๊ฒฝ ์ฌ๋ถ๋ฅผ ์ ๊ฒฝ์ฐ์ง ์๊ธฐ ๋๋ฌธ์ shouldComponentUpdate() ์์ ๋ฌด์กฐ๊ฑด ๋ค์ ๋ ๋๋ง๋ฉ๋๋ค.
๋ฐ๋ผ์ shouldComponentUpdate() ๋ฅผ ํตํด ๋ค์ ๋ ๋๋ง ๋์ง๋ง, state์ props์ ์์ ๋น๊ต๋ฅผ ํตํ ๋ฆฌ๋ ๋๋ง ์ฌ๋ถ๋ฅผ ์๋์ผ๋ก ํ๋ณํด ์ฃผ๋ ๊ฒ์ด ์์ ์ปดํฌ๋ํธ(pureComponent)๋ผ ํ ์ ์์ต๋๋ค.
<aside> ๐ก
shouldComponentUpdate()
true
์ธ๋ฐ, false
๋ฅผ ๋ฐํํ ๊ฒฝ์ฐย render()์ componentDidUpdate()๋ ํธ์ถ๋์ง ์๋๋ค.
</aside>