๐น ๋ ๋๋ง
: ํจ์ ์ปดํฌ๋ํธ๊ฐ ํธ์ถ๋ ๋(ํด๋์ค ์ปดํฌ๋ํธ์์ render ๋ฉ์๋ ํธ์ถ๋ ๋) ๋ฐ์. ํธ์ถํ๋ฉด DOM ์์ฑ์ ๊ดํ ์ง์ ์ฌํญ๋ค์ด ๋ฐํ๋๋ค.
๐น ๋ง์ดํ
: ๋ฆฌ์กํธ๊ฐ ์ต์ด๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ ๋. ์์ ์ง์์ฌํญ๋ค๋ก๋ถํฐ ์ฒซ DOM์ ์ค์ ๋ก ๋น๋ํ๋ค.
๐น ๋ฆฌ๋ ๋๋ง
: ๋ฆฌ์กํธ๊ฐ ํจ์ ์ปดํฌ๋ํธ๋ฅผ ๋ค์ ํธ์ถํ์ฌ ์ด๋ฏธ ๋ง์ดํธ๋ ์ปดํฌ๋ํธ์ ์ ์ฉํ ์๋ก์ด ์ง์์ฌํญ๋ค์ ๊ฐ์ ธ์จ๋ค.
๐ธ ํด๋์ค ์ปดํฌ๋ํธ
App์ ์ธ์คํด์ค ์์ฑ -> render ๋ฉ์๋ ํธ์ถ [ ๋ ๋๋ง ] -> DOM ๋น๋์ ํ์ํ ์ง์์ฌํญ๋ค์ ์ป์
- ์ต์ด์ ๋ ๋๋ง์ธ ๊ฒฝ์ฐ, ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํ๋ค๊ณ ํํ
state๊ฐ ๋ณ๊ฒฝ -> ๋ฆฌ๋ ๋; render ์ฌํธ์ถ -> DOM ์ ๋ฐ์ดํธ์ ๊ดํ ์๋ก์ด ์ง์์ฌํญ์ด ๋ฐํ -> ์ฌ์กฐ์
๐ธ ํจ์ ์ปดํฌ๋ํธ
ํจ์๊ฐ ํธ์ถ (๋ ๋๋ง) ๋๊ณ , ๋ง์ดํธ๋ฅผ ์ํ ์ง์์ฌํญ๋ค์ด ๋ฆฌํด
์ปดํฌ๋ํธ๋ง๋ค ๊ฐ์์ ์ค์ผ์ฅด
'React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
forwardRef (0) | 2021.11.22 |
---|---|
Lazy-loading (0) | 2021.05.08 |
Kakao Map API์์ ๋ง์ฐ์ค ์ด๋ฒคํธ ํธ๋ค๋ง (0) | 2021.04.07 |
Rendered more hooks than during the previous render (0) | 2021.03.28 |
๋๊ธ