728x90
๋ฐ์ํ
React๋ฅผ ์ฌ์ฉํ์ ๋, ํ๋ฉด์ด ๊ทธ๋ ค์ง๋ ๋์ ์์์ ํ๋ฉด์ ๋ค์ ๊ทธ๋ฆฌ๊ฒ ๋๋ ๋ฆฌ๋ ๋๋ง ์์์ ๋๋ค.
Mount (๋ง์ดํธ)
์ปดํฌ๋ํธ๊ฐ ์์ฑ๋์ด ๋ ๋๋ง ๋๋ ๊ณผ์ ์ ๋ง์ดํธ๋ผ๊ณ ํ๋ฉฐ,
๋ ๋๋ง ๋ ์ปดํฌ๋ํธ๊ฐ ์ญ์ ๋๋ ๊ณผ์ ์ Unmount(์ธ๋ง์ดํธ)๋ผ๊ณ ํฉ๋๋ค.
- ํจ์ ์ปดํฌ๋ํธ ํธ์ถ
- ๊ตฌํ๋ถ ์คํ
- props ์ ๋ฌ๋ฐ๊ณ , hook ๋ด๋ถ ๋ณ์, ํจ์ ์์ฑ.
(๋ด๋ถ ๋ณ์ ๋ฐ ํจ์๋ hook์ ์๋ state๋ function์ ์ ์ธ. ์ด๋ค์ ๋ณ๋๋ก ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋์ด ๊ด๋ฆฌํจ.)
- props ์ ๋ฌ๋ฐ๊ณ , hook ๋ด๋ถ ๋ณ์, ํจ์ ์์ฑ.
- ๊ฐ์ DOM์
- ์์ฑ
- ์ปค๋ฐ
- ์ค์ DOM์ ๋ฐ์
- useLayoutEffect
- ํ๋ฉด์ Paint ํ๊ธฐ ์ ์, useLayoutEffect์ ๋ฑ๋กํด ๋ effect '๋๊ธฐ'๋ก ์คํ๋๋ค.
- ์ค์ ๋ก ํด๋น ํ ์ ์ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ผ๋ก ์๊ณ ์์.
- ๊ณต์ ๋ฌธ์๋ฅผ ํ์ธํ๋ฉด ์ฑ๋ฅ์ ํ์ด์๊ฐ ์์ผ๋ฏ๋ก, useEffect๋ฅผ ๊ถ์ฅ
- state, redux store ๋ฑ์ ๋ณ๊ฒฝ์ด ์๋ค๋ฉด ํ๋ฒ ๋ ๋ฆฌ๋ ๋๋ง ๋๋ค.
- Paint
- ์ค์ DOM์ ํ๋ฉด์ ๊ทธ๋ฆฌ๋ฉฐ ๋ง์ดํธ ์๋ฃ(didMount).
- useEffect
- ๋ง์ดํธ ๋์ด ํ๋ฉด์ด ๊ทธ๋ ค์ง์๋ง์, useEffect์ ๋ฑ๋กํด ๋ ๋ด์ฉ๋ค์ด '๋น๋๊ธฐ'๋ก ์คํ
Rerender (๋ฆฌ๋ ๋)
state๊ฐ์ด ๋ณํ์ฌ ํ๋ฉด์ด ๋ค์ ๊ทธ๋ ค์ง๊ฒ ๋๋ ๊ฒ์ ๋ฆฌ๋ ๋๋ผ๊ณ ํฉ๋๋ค.
- ํจ์ ์ปดํฌ๋ํธ ์ฌํธ์ถ
- ๊ตฌํ๋ถ ์คํ
- props ์ ๋ฌ๋ฐ๊ณ , hook ๋ด๋ถ ๋ณ์, ํจ์ ์ฌ์์ฑ. (hook์ ํน์ฑ์ ๋ฐ๋ผ ๊ธฐ์กด์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํ ๊ฐ์ ์ ์ ํ ํ์ฉ)
- ๋ ๋๋ง
- ์๋ก์ด ๊ฐ์DOM์ ๋ ์์ฑ ํ, ์ด์ ๊ฐ์ DOM๊ณผ ๋น๊ตํ์ฌ, ๋ฌ๋ผ์ง ๋ถ๋ถ์ ํ์ํ๊ณ , ์ค์ DOM์ ๋ฐ์ํ ๋ถ๋ถ์ ๊ฒฐ์
- ์ปค๋ฐ
- ๋ฌ๋ผ์ง ๋ถ๋ถ๋ง ์ค์ DOM์ ๋ฐ์
- useLayoutEffect
- ๋ง์ดํธ์ ๊ฐ์
- state, redux store ๋ฑ์ ๋ณ๊ฒฝ์ด ์๋ค๋ฉด ํ๋ฒ ๋ ๋ฆฌ๋ ๋๋ง ๋๋ค.
- Paint
- ์ค์ DOM์ ํ๋ฉด์ ๊ทธ๋ฆผ. ์ ๋ฐ์ดํธ ์๋ฃ(didUpdate).
- useEffect
- ์์กด์ฑ ํ์ธ ํ, ํด๋นํ๋ ๋ถ๋ถ๋ง ‘๋น๋๊ธฐ’๋ก ์คํ
Rerender ์กฐ๊ฑด
- state๊ฐ ๋ณ๊ฒฝ
- props ๋ณ๊ฒฝ
- redux store ๋ณ๊ฒฝ
- ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง ๋์ด ์์ ์ปดํฌ๋ํธ๊น์ง ๋ฆฌ๋ ๋๋ง
Rerender๋ฅผ ๋ง๋ ๋ฐฉ๋ฒ
- ๋ถ๋ชจ ์ปดํฌ๋ํธ๋๋ฌธ์ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ๋ง๊ธฐ ์ํด์๋ React.memo๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ์ปดํฌ๋ํธ ๋ด๋ถ ๋ณ์์ ๊ฐ์ ๋ง์ผ๋ ค๋ฉด useMemo, ํจ์๋ฅผ ๋ง์ผ๋ ค๋ฉด useCallback ์ฌ์ฉ ํ ์์กด์ฑ์ ๋ถ์ฌํ์ฌ Rerender ์กฐ๊ฑด์ ๋ถ์ฌํ๋ฉด ๋ฉ๋๋ค.
๋์ ์๋ฆฌ๋ ์ค์ํฉ๋๋ค.
์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ๋ฐ์ ์งํํ๋๋ฐ ์ด๋ ค์์ด ์๊ณ , ๋๋ฒ๊น ๋ํ ์ํ ์ ์์ต๋๋ค.
728x90
'Front-End > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
React] Hook : useRef (0) | 2023.06.20 |
---|---|
React] Strict Mode (0) | 2023.06.20 |
React] Hook : useEffect (0) | 2023.06.20 |
React] Hook (0) | 2023.06.20 |
React] Hook : useState (1) | 2023.06.06 |