์ˆœ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

React.PureComponent๋Š” React.Component์™€ ์™„์ „ํžˆ ๋™์ผํ•˜์ง€๋งŒ, PureComponent๋Š” shouldComponentUpdate() ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•œ ๋ Œ๋”๋ง ์—ฌ๋ถ€๋ฅผ ์ž๋™์œผ๋กœ ์ฒ˜๋ฆฌํ•ด ์ฃผ๋Š” ๊ฒƒ์ด ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

*PureComponent๋Š” props๋‚˜ state๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ, ์–•์€ ๋น„๊ต(shallow comparison)๋ฅผ ํ†ตํ•ด ๋‘˜ ๋‹ค ๋น„๊ตํ•˜์—ฌ ์—…๋ฐ์ดํŠธ ์—ฌ๋ถ€๋ฅผ ์ž๋™์œผ๋กœ ํŒ๋‹จํ•˜์—ฌ shouldComponentUpdate() ์—์„œ ๋‹ค์‹œ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค.*

๋ฐ˜๋ฉด, Component๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ํ˜„์žฌ props์™€ state๋ฅผ ๋‹ค์Œ ๊ฐ’๊ณผ ๋น„๊ตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. state, props์˜ ๋ณ€๊ฒฝ ์—ฌ๋ถ€๋ฅผ ์‹ ๊ฒฝ์“ฐ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— shouldComponentUpdate() ์—์„œ ๋ฌด์กฐ๊ฑด ๋‹ค์‹œ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ shouldComponentUpdate() ๋ฅผ ํ†ตํ•ด ๋‹ค์‹œ ๋ Œ๋”๋ง ๋˜์ง€๋งŒ, state์™€ props์˜ ์–•์€ ๋น„๊ต๋ฅผ ํ†ตํ•œ ๋ฆฌ๋ Œ๋”๋ง ์—ฌ๋ถ€๋ฅผ ์ž๋™์œผ๋กœ ํŒ๋ณ„ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด ์ˆœ์ˆ˜ ์ปดํฌ๋„ŒํŠธ(pureComponent)๋ผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<aside> ๐Ÿ’ก

shouldComponentUpdate()