
์ ํํ์ง ์๋ค!!
TIL ๋ธ๋ก๊ทธ๋ค์ด ๋ง์ด ์๊ฒจ๋๋ฉด์ ๋ฐ์ํ๋ ๋ฌธ์ ์
react rendering๊ณผ์ ์ ๊ตฌ๊ธ๋งํ๋ค 10์ฌ๊ฐ์ ๋ธ๋ก๊ทธ ๊ธ์ ์๋ฌด๋ฆฌ ์ฝ์ด๋ด๋, ๋น์ท ์ดํด๊ฐ ์๋๋ค.
ํ๊ตญ์ด๋ ๋ง๋๋ฐ ๋ญ๊ฐ ์ด์ํ๋ค. ๊ฐ์๊ธฐ ๋์ ๊ฐ๋ฐ ์ค๋ ฅ์ ์์ฌ์ ํ๊ฒ ๋์๋ค.
์ด๋์ ๋๋ฌด ๊ณผํ ๋ดํฅ์ฑ(๋ฌธ์ ์ ์์ธ์ ์๊ธฐ ํ์ผ๋ก ๋๋ฆผ)์ ๋ฌธ์ ๊ฐ ๋๋ ๋ฏํ๋ค.
์๋ฌธ์ผ๋ก ์ณ์ ๊ฒ์ํด๋ณด์๋ค.
์ด๋ฐ? ๋ด๊ฐ ์์ํ๊ฒ ์๊ฐํ ๊ฒ๋ค์ด ์๋ฌธ์ผ๋ก ๊ฒ์ํ๋, ์ ํํ ๊ฐ๋ ค์ด ๋ถ๋ถ์ ๋
ผ๋ฆฌ์ ์ผ๋ก ์ค๋ช
ํ๊ณ ์์๊ณ , ๋ด๊ฐ ํ๋ฆฐ๋ถ๋ถ์ด๋ผ ์์ ํ ๋ถ๋ถ๋ ์ ํํ ๋์๋ค.
๋ด๊ฐ ์ฌ๋ฆฌํ์ ๊ณต๋ถํ ๋ ์ ์ฉํ๋ process๋ฅผ ์๊ฐํด์ ๊ฐ๋ฐ ๊ณต๋ถ๋ฅผ ํ๋ฉด์๋ ์ ์ฉํ์.
3์ฐจ, 4์ฐจ ๊ฐ๊ณต์ ์ปจํ
์ธ ๋ ๊ฐ๋
์ฑ๊ณผ ์ฌ๋ฏธ๊ฐ ์์ด์ผ ๊ฐ์น๊ฐ ์๋ค.
๊ฐ๋
์ฑ๊ณผ ์ฌ๋ฏธ๋ ์๋ 3,4์ฐจ ์ปจํ
์ธ ๋ฅผ ๋จธ๋ฆฌ ์ธ๋งค๊ณ ์ฝ์ ๊ฐ์น๊ฐ ์ ํ ์๋ค.
๊ฐ๋
์ฑ๊ณผ ์ฌ๋ฏธ๊ฐ ๋จ์ด์ง๋๋ผ๋ ์ ํํ ์ ๋ณด์ original source๋ฅผ ์ ํ๋ฉด ํจ์ฌ ๋น ๋ฅด๊ฒ ์ ๋ณด๋ฅผ ์
๋ ฅํ ์ ์๋ค. ์ ์๋๋ฉด ํ๊ตญ ์์ ์ ์ฌ์, ๊ฐ๋
์ฑ, ์ฌ๋ฏธ, ์ ๋ณด์ opitimal point๋ฅผ ์ฐพ์.
๊ฐ๋
์ฑ๊ณผ ์ฌ๋ฏธ ์ ๋ณด๊น์ง ๋ชจ๋ ์ฑ๊ธด 3,4์ฐจ ์ปจํ
์ธ ์ ์์ฃผ ์ข์ ์์๋ฅผ ๋งํฌํด๋๋ค.
https://felixgerschau.com/react-rerender-components/
When does React re-render components?
React re-rendering explained and how to optimize React's re-render performance
felixgerschau.com
'๐ง FeedBack' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [๊ณ ์ฐฐ] ๊ฐ๋ฐ์ฉ ๊ธ์ฐ๊ธฐ ๋๋์๋ณด๊ธฐ (0) | 2022.03.31 |
|---|---|
| [๊ณ ์ฐฐ] ํ์์ํ์ผ๋ก ๊ณต๋ถํ ๋ ์ฃผ์ํ ์ (0) | 2021.11.25 |