ํผ๋๋ก ๋์๊ฐ๊ธฐ
Dev.toFrontend
์๋ฌธ ์ฝ๊ธฐ
React Hooks๋ฅผ ํตํ ์ํ ๊ด๋ฆฌ ์ต์ ํ ๋ฐ ๋ ๋๋ง ์ ๋ต ์๋ฆฝ
๐ React Hooks & Rendering โ A Clear Mental Model (For My Future Self Too)
AI ์์ฝ
Context
ํจ์ํ ์ปดํฌ๋ํธ์ ๋ฐ๋ณต์ ์ธ ์คํ์ผ๋ก ์ธํ ๋ฐ์ดํฐ ์ด๊ธฐํ ๋ฌธ์ ๋ฐ์. UI ์ ๋ฐ์ดํธ์ ๋ฌด๊ดํ ์ํ ์ ์ง ๋ฐ ๋ถํ์ํ ์ฌ์ฐ์ฐ์ผ๋ก ์ธํ ์ฑ๋ฅ ์ ํ ํด๊ฒฐ ํ์.
Technical Solution
- useState ๋์ ์ ํตํ UI ๋ฐ์ ๋ฐ์ดํฐ์ ์ง์์ฑ ํ๋ณด
- useEffect๋ฅผ ํ์ฉํ UI ํ์ธํ ํ Side Effect ๋ถ๋ฆฌ ์ฒ๋ฆฌ
- useRef ๊ธฐ๋ฐ์ DOM ์ง์ ์ ๊ทผ ๋ฐ UI ๋ฆฌ๋ ๋๋ง ์๋ Silent Storage ๊ตฌํ
- useContext๋ฅผ ํตํ Prop Drilling ์ ๊ฑฐ ๋ฐ ์ ์ญ ๋ฐ์ดํฐ ๊ณต์ ๊ตฌ์กฐ ์ค๊ณ
- useMemo ๋ฐ useCallback ์ ์ฉ์ผ๋ก ๊ณ ๋น์ฉ ์ฐ์ฐ๊ณผ ํจ์ ์ฌ์์ฑ ๋ฐฉ์ง
- ์๋น์ค ํน์ฑ์ ๋ฐ๋ฅธ CSR, SSR, SSG ๋ ๋๋ง ์ ๋ต ์ฐจ๋ฑ ์ ํ
์ค์ฒ ํฌ์ธํธ
- UI ๋ณ๊ฒฝ์ด ํ์ ์๋ ๋ณ์๋ useRef๋ฅผ ์ฐ์ ๊ฒํ - ์์ ์ปดํฌ๋ํธ ์ต์ ํ ์ useCallback์ ํตํ ํจ์ ์ฐธ์กฐ ๋ฌด๊ฒฐ์ฑ ์ ์ง - ๊ฒ์ ์์ง ์ต์ ํ(SEO) ํ์ ์ฌ๋ถ์ ๋ฐ๋ผ SSR/SSG ๋์ ๊ฒฐ์ - ๊ณ ๋น์ฉ ๊ณ์ฐ ๋ก์ง์ useMemo๋ก ๋ํํ์ฌ ๋ ๋๋ง ์ฑ๋ฅ ์ต์ ํ