221119(ํ )
๐ ์ฑ์ฅ์ผ์ง 3.0
์ฑ
ํ๋ณตํ ์ด๊ธฐ์ฃผ์์(์จ์ธ ๋ค์ด์ด)
์ ๋ด์ฉ์ ์๊ทน๋ฐ์ ์์ํ๋ ์๋ฐํ ์ฑ์ฅ๊ธฐ๋ก
์ด์์๋ ๊ฝ๊ณผ ์ฃฝ์ ๊ฝ์ ์ด๋ป๊ฒ ๊ตฌ๋ณํ๋๊ฐ?
์ฑ์ฅํ๊ณ ์๋ ๊ฒ์ด ์ด์ ์๋ ๊ฒ์ด๋ค.
์๋ช ์ ์ ์ผํ ์ฆ๊ฑฐ๋ ์ฑ์ฅ์ด๋ค!
๐ณ ํค์๋ (1.0)
์ต๋ํ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌ, ์ถํ์ ๋ณด๋ฉด์ ์ค์ค๋ก ์ค๋ช
๐ ๊ฒฝํ ์์ฃผ๋ก (2.0)
๋จ์ ์ ๋ณด๋ฅผ ์ ๋ฌํ๊ธฐ๋ณด๋ค ๋ฌด์์ ๋ฐฐ์ ๊ณ ์ด๋ป๊ฒ ํด๊ฒฐํ๋์ง ์งง๊ณ ๊ฐ๋จํ๊ฒ ์์ฑ
โ๏ธ ์ ํด์ง ํ ํ๋ฆฟ์ ๋ง์ถฐ์ (3.0)
ํค์๋, ๊ฒฝํ ๋ชจ๋ ์ข๋ค. ๋ค๋ง ๋งค์ผ ์์ฑํ๊ธฐ๋ก ๋ง์ ๋จน์๋งํผ ํต์ฌ๋ง ๊ฐ๊ฒฐํ๊ฒ ์ ๋ฆฌํ ์ ์๊ฒ ํ ํ๋ฆฟ์ ์์ฑ
๐ ์ค๋์ ํค์๋
- ๋ฆฌ์กํธ
- state๊ฐ ์ฐธ์กฐํ(๋ฐฐ์ด, ๊ฐ์ฒด ๋ฑ)์ผ ์, ๋ถ๋ณ์ฑ ์ ์ง
- ์ปดํฌ๋ํธ ๋ฆฌ๋๋๋ง ์กฐ๊ฑด
- state๊ฐ ๋ณํ๋ ๊ฒฝ์ฐ
- props๊ฐ ๋ณํ๋ ๊ฒฝ์ฐ
- ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ณํ๋ ๊ฒฝ์ฐ(์ฃผ๋ก ์ด ๊ฒฝ์ฐ์ ์ฑ๋ฅ ์ ํ๊ฐ ๋ฐ์)
- ๋ถ๋ชจ ์ปดํฌ๋ํธ ๋ณ๊ฒฝ์ ๋ฐ๋ฅธ ์์ ์ปดํฌ๋ํธ ๋ฆฌ๋๋๋ง ๋ง๊ธฐ
- ํด๋์ค ์ปดํฌ๋ํธ: shouldComponentUpdate, PureComponent
- ํจ์ ์ปดํฌ๋ํธ: React.memo
- props๋ ์์ ์ปดํฌ๋ํธ์์ ๋ณ๊ฒฝํ๋ฉด ์๋๋ค. ๋ณ๊ฒฝ์ด ํ์ํ ๋, props๋ฅผ ์์ ์ปดํฌ๋ํธ์ state๋ก ํ ๋นํ๊ณ setState๋ฅผ ํตํด ๋ณ๊ฒฝ
๐ ์์ฝ ๋ฐ ํ๋ฃจ ๊ฐ๋จ ํ๊ณ
์ฃผ๋ง์ด๋ผ ๊ทธ๋ฐ๊ฐ ์ค๋์ ์กฐ๊ธ ๊ณต๋ถ์์ด ์ ์ ๊ธฐ๋ถโฆ ์ผ๋จ ํ์
์คํฌ๋ฆฝํธ๋ฅผ ๋ง์ด ํ์ตํ์ง ๋ชปํ๋น. ๋ฐ์ฑํ๋ค. ์ด๋ ๊ฒ ๊ณต๋ถํ๋ ๊ฒ ์ฌ๋ฏธ์์ง๋ง, ์ธ์ ๋ ๋๊ตฌ๋ค์ ์ตํ๋ค๋ ๊ฒ์ ๊ธฐ์ตํ์. ์ด๋์ ๋ ๊ฐ ์ก์์ผ๋ฉด, ๊ทธ ๋๊ตฌ๋ฅผ ์ง์ ์ฌ์ฉํด๋ณด๋ ๊ฒ ๊ฐ์ฅ ์ข์ ๊ธธ์ด๋ค.
๊ธ์ ์ ์ธ ์ฌ์ ๋ฅผ ๊ฐ์. ์ฌ๋๋ค์ด ์์๋ ๊ธธ์ ์ฐจ๊ทผ์ฐจ๊ทผ ๋ฐ์๊ฐ๋ฉด์ ๊ฐ๋ฐ์๋ก์์ ๋๋ฅผ ์ ๋ฆฝํด๋์๊ฐ์.