useSyncExternalStore
์ธ๋ถ ์คํ ์ด๋ฅผ ๊ตฌ๋ ํ ์ ์๋ React Hook
React๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ด์ฌ์ฌ ๋ฐ์์ ๋์ํ๋ External Store์ ์ํ ํ๋ฆ์ ๊ด์ฐฐํ์ง ์๋๋ค.
๊ทธ๋ฌ๋ useSyncExternalStore ํ ์ ์ฌ์ฉํ๋ฉด External Store๋ฅผ ๊ตฌ๋ (๊ด์ฐฐ)ํ์ฌ ์ํ ๋ณํ์ ๋ํ ์๋ฆผ์ ์ ๊ณต ๋ฐ๋๋ค.
ํด๋น ํ
์ด ๋์ค๊ฒ๋ ์ด์
concurrent feature
์ tearing ํ์์ ํด๊ฒฐํ๊ธฐ ์ํด ํ์ํ๋ค.Extenral Store์ ๋ณ๊ฒฝ์ฌํญ์ ๊ตฌ๋ ํ๊ณ ,
tearing
์ด ๋ฐ์ํ์ง ์๋๋ก Extenral Store์ ๋ณ๊ฒฝ์ฌํญ์ ๊ฐ์งํ์ฌ ๋ฆฌ๋ ๋๋ง์ ์์ผ์ฃผ๋ ์ญํ ์ ํ๋ค.
์๋ ๋ฐฉ์
subscribe
์คํ ์ด์ ๋ณ๊ฒฝ์ฌํญ์ ๊ตฌ๋ ํ๊ธฐ ์ํ ์ฝ๋ฐฑํจ์
์ ๋ฌ๋ ์ฝ๋ฐฑํจ์๋ฅผ ํตํด React์๊ฒ ์คํ ์ด๊ฐ ๋ณ๊ฒฝ๋์์ผ๋ฏ๋ก ๋ฆฌ๋ ๋๋ง์ด ํ์ํ๋ค๊ณ ์๋ฆฐ๋ค.
ํจ์ ์ปดํฌ๋ํธ๋ ๋งค ๋ ๋๋ง๋ง๋ค ๋ด๋ถ ํจ์๋ฅผ ๋ค์ ์ ์ธํ๊ฒ ๋์ด์, ๊ตฌ๋ ํจ์๋ ๋งค ๋ ๋๋ง๋ง๋ค ๋ฌ๋ผ์ง๊ฒ ๋๋๋ฐ ์ด๋ก ์ธํด ๋ฆฌ์กํธ๋ ์๋ก ์ ๋ฌ๋ ๊ตฌ๋ ํจ์๋ก ์คํ ์ด๋ฅผ ๋ค์ ๊ตฌ๋ ํ๋ side-effect๊ฐ ๋ฐ์ํ๊ฒ ๋๋ค.
์ด๋ฌํ ๋ถํ์ํ ์คํ ์ด ๊ตฌ๋ ์ ๋ฐฉ์งํ๊ธฐ ์ํด์๋ useCallback์ ์ฌ์ฉํ์ฌ ํจ์๋ฅผ ๋ฉ๋ชจ์ด์ ์ด์ ํ๊ฑฐ๋, ํด๋์ค๋ฅผ ์ฌ์ฉํ์ฌ ํญ์ ๊ฐ์ ๋ฉ์๋๋ฅผ ์ฐธ์กฐํ๋๋ก ๋ง๋๋ ๋ฐฉ๋ฒ์ด ์๋ค.
getSnapshot
์คํ ์ด์ ๊ฐ์ ๋ฐํํ๋ ์ฝ๋ฐฑํจ์
React๊ฐ ์คํ ์ด์์ ๊ฐ์ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ค.
ํน์ ์์ ์ ์คํ ์ด์ ์ํ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ๋๋ฌธ์ snapshot์ด๋ ๋ค์ด๋ฐ์ ์ฌ์ฉํ๋ค.
subscribe
์ ๋ฑ๋กํ ์ฝ๋ฐฑํจ์๊ฐ ํธ์ถ๋ ๋๋ง๋ค ๋ฆฌ์ํธ๋ getSnapshot ์ฝ๋ฐฑํจ์๋ฅผ ํธ์ถํ์ฌ ์ต์ ์คํ ์ด ์ํ๋ฅผ ๊ฐ์ ธ์ค๊ณ ๋ฆฌ๋ ๋๋ง ์ํจ๋ค.๋ฆฌ์กํธ๋ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง์ด ์์๋ ๋ getSnapshot ํจ์๋ฅผ ํธ์ถํ์ฌ ๋ฐํ๋ ๊ฐ(์คํ ์ด์ ์ํ)๋ฅผ ์บ์ฑํ๊ณ , ๋ ๋๋ง ์ดํ ์คํ ์ด๊ฐ ๋ณ๊ฒฝ๋์ง ์์๋์ง ํ์ธํ๊ธฐ ์ํด ํ๋ฒ ๋ ํธ์ถํด์ ์ด์ ์ ์บ์ํ ์คํ ์ด ์ํ์ ๋น๊ตํด ๋ค๋ฅธ ๊ฒฝ์ฐ์๋ง ์ปดํฌ๋ํธ๋ฅผ ๋ค์ ๋ฆฌ๋ ๋๋งํ๋ค.
์ฆ, ๋ ๋๋ง์ด ์์๋ ๋์ ๋ ๋๋ง ์ดํ์ ํ ๋ฒ๋ getSanpshot์ ํธ์ถํ์ฌ ์ต์ ์คํ ์ด ์ํ์ Sync(๋๊ธฐํ)์ํจ๋ค.
์คํ ์ด์ ์ํ๋ฅผ ์บ์ฑํ ๋๋ ๊ฐ์ ๋ณต์ฌํ๋ ๋์ ๊ทธ๋๋ก ์ ์ฅํ๋ฉฐ, ์ด์ ์คํ ์ด์ ์ํ์ ๋น๊ตํ ๋๋ ์์ ๋น๊ต(Object.is)๋ฅผ ์ฌ์ฉํ๋ค.
๋ฐ๋ผ์ ์คํ ์ด์ ์ํ๋ฅผ ๋ถ๋ณ(immutable)ํ๊ฒ ์ ์งํด์ผ ๋ฆฌ์ํธ๊ฐ ์คํ ์ด์ ๋ณ๊ฒฝ์ฌํญ์ ๊ฐ์งํ ์ ์๋ค.
getSnapshot ์ฝ๋ฐฑ ํจ์๋ ์๋ณธ ๋ฐ์ดํฐ๋ฅผ ๋ฐํํด์ผ ํ๋ค.
๋ง์ฝ ํญ์ ์๋ก์ด ๊ฐ์ ๋ฐํํ๋ค๋ฉด ๋ฌดํ ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ํ ์ ์์ผ๋ฏ๋ก ์ฃผ์
getServerSnapshot
์ต์ ๋ํ ๊ฐ์ผ๋ก, ์ปดํฌ๋ํธ๊ฐ ์๋ฒ์์ ๋ ๋๋ง๋ ๋ ํธ์ถ๋๋ getSnapshot
์ปดํฌ๋ํธ๊ฐ SSR ํ๊ฒฝ์์ ๋ ๋๋ง๋ ๋ ์ฌ๋ฐ๋ฅธ HTML์ ์ ๊ณตํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.
getSnapshot์ SSR ๋ฒ์
Tearing
์๋์น ์์ ์ํ ๋ถ์ผ์น ์์ ์์ UI๊ฐ ๋ ๋๋ง๋๋ ๊ฒ์ ์๋ฏธ
conccurrent ๊ธฐ๋ฅ์ ์ ์ฉํ๋ฉด ๋ ๋๋ง ์์ ์ด ๋ค๋ฅธ ์์ (์ฌ์ฉ์ ์ธํฐ๋ ์ )๊ณผ ๋์์ ์คํ๋ ์ ์๋๋ฐ ๋ ๋๋ง ์์ ์ด ์๋ฃ๋๊ธฐ ์ ์ ๋ค๋ฅธ ์์ (์ํ ๋ณ๊ฒฝ)์ด ์คํ๋๋ฉด์ ํ๋ฉด์ ์ผ๋ถ๋ถ๋ง ์ ๋ฐ์ดํธ๋๊ฑฐ๋ ๊นจ์ง๋ ํ์, ์ฆ ๋ณ๊ฒฝ๋ ์ํ์ ๋ํ ๋ถ์ผ์น์ ์ํด ๋ฐ์ํ๋ ๋ฌธ์ ์ด๋ค.
External Store์๋ง Tearing Issue๊ฐ ๋ฐ์ํ๋ค?
๋ฆฌ์ํธ ๋ด๋ถ์ ์ผ๋ก ์ํ๊ด๋ฆฌ๋ฅผ ํ๋ฉด ์ฐ์ ์์๊ฐ ๊ฐ์ ๊ฒ๋ค๋ผ๋ฆฌ ๋ฌถ์ด ์ผ๊ด์ ์ผ๋ก ์ฒ๋ฆฌํ๋ฏ๋ก tearing ํ์์ ๋ฐฉ์งํ ์ ์๋ค.
ํ์ง๋ง, ๋ฆฌ์กํธ ๊ด์ฌ์ฌ ๋ฐ์ธ ์ธ๋ถ ์คํ ์ด๋ฅผ ์ฌ์ฉํ๋ฉด ๊ด์ฌ์ฌ ๋ฐ์ธ ์ธ๋ถ ์ํ ๋ณ๊ฒฝ์ ์ฐ์ ์์๋ฅผ ์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ฐ์ดํฐ ๋ณ๊ฒฝ๊ณผ ๋ ๋๋ง ์์ ์ด ์ถฉ๋ํ์ฌ tearing ํ์์ด ๋ฐ์ํ ์ ์๋ค.
Concurrent feature
๋น ๋ฅด๊ฒ ๋ ๋๋ง๋๋ ๋ถ๋ถ์ ์ฐจ๋จํ์ง ์๊ณ ๋๋ฆฐ ๋ถ๋ถ์ (์น ์์ปค)๋ฐฑ๊ทธ๋ผ์ด๋์ ๋ ๋๋ง์ํด์ผ๋ก์จ ๋น ๋ฅธ ๋ถ๋ถ๊ณผ ๋๋ฆฐ ๋ถ๋ถ์ ๋ถ๋ฆฌํ์ฌ ๊ฐ ๋ถ๋ถ์ด ์์ ์ ์๋๋ก ์ฌ์ฉ์์ ์ธํฐ๋ ์ ์ ์ฆ๊ฐ ๋ฐ์ํ ์ ์๋๋ก ์ฌ์ฉ์ฑ์ ๋ํ ๊ฒ
React๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋๊ธฐ์ ์ผ๋ก ๋ ๋๋งํ๋ค. ์ฆ, ํ๋ฒ ๋ ๋๋ง์ด ์์๋๋ฉด ์์ธ๋ฅผ ์ ์ธํ๊ณ ๋ ๋๋ง์ ์ค๋จ์ํฌ ์ ์์ด, ๋ ๋๋ง์ด ๋๋ ํ์๋ง ๋ค๋ฅธ ์์ ์ ํ ์ ์๋ค.
๋๋ฆฐ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ฉด ํด๋น ๋ ๋๋ง์ด ๋๋์ผ์ง๋ง UI์ ๋ค๋ฅธ ๋ถ๋ถ์ ๋ํ ์๋ก์ด ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ฆฐ ์ปดํฌ๋ํธ ๋ ๋๋ง์ด ๋ค๋ฅธ UI์ ๋น ๋ฅธ ๋ถ๋ถ์ ์ฐจ๋จํ๊ฒ ๋๋ค.
์ฐ์ ์์ ์
๋ฐ์ดํธ
React Concurrent๋ ์ฐ์ ์์๊ฐ ๋์ ์ ๋ฐ์ดํธ์ ๋ฎ์ ์ ๋ฐ์ดํธ๋ก ๋๋๋ค.
์ ๋ฐ์ดํธ๋ ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ํ๋ ๋ชจ๋ ๊ฒ์ ์๋ฏธํ๋ค.
์ฐ์ ์์๊ฐ ๋์ ์ ๋ฐ์ดํธ โ
useState
,useReducer
๋ฑ, ์ผ๋ฐ์ ์ผ๋ก์ต์ํ ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด ๋์ ์ฐ์ ์์ ์ ๋ฐ์ดํธ๊ฐ ๋ฐ์ํ๋ค.์ฐ์ ์์๊ฐ ๋ฎ์ ์ ๋ฐ์ดํธ โ
startTransition
,useDefferedValue
ํธ์ถ๋ก ์ธํด ๋ฐ์ํ๋ค.์ฐ์ ์์๊ฐ ๋์ ์ ๋ฐ์ดํธ๊ฐ ์๋ฃ๋ ํ์๋ง ์คํ๋๋ค.
์ค๊ฐ์ ์ฐ์ ์์๊ฐ ๋์ ์ ๋ฐ์ดํธ์ ์ํด ์ค๋จ๋๋ฉด ๊ธฐ๋ค๋ฆฐ๋ค์ ์ฒ์๋ถํฐ ๋ค์ ๋ ๋๋งํ๋ค.
์ ๋ฐ์ดํธ๋ ๊ฐ์ ์ฐ์ ์์์ ์ ๋ฐ์ดํธ๋ฅผ ๋ชจ๋ ํ๋ฒ์ ์ผ๊ด์ฒ๋ฆฌํ๋ค.
startTransition
useTransition
๊ณผ ๋ ๋ฆฝํstartTransition
์ ์ด์ฉํด์ Concurrent ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋ค.
startTransition์ ๊ฐ์ธ๋ฉด ํน์ ์ ๋ฐ์ดํธ๋ฅผ ์ฐ์ ์์๊ฐ ๋ฎ์ ์ ๋ฐ์ดํธ๋ก ๋ณ๊ฒฝ ๊ฐ๋ฅ
startTransition์ ์ฝ๋ฐฑ ๋ด๋ถ์ ์ํ ์ ๋ฐ์ดํธ๋ ๋ฐ๋์ ์ฝ๋ฐฑ ๋ด์ ์ค์ฝํ์์ ํธ์ถํด์ผ ํ๋ค.
startTransition์ ์ํ๋ง ์ ์ฉ ๊ฐ๋ฅํ๋ค. (ref๋ ํด๋น โ)
useDefferedValue
๋ช ๋ นํ ๋ฐฉ์์ธ startTransition์ ๋ฌ๋ฆฌ ์ ์ธํ์ผ๋ก ๋์์ฑ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋ค.
์ฐ์ ์์๊ฐ ๋ฎ์ ์ ๋ฐ์ดํธ์ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ฉฐ, ์ด ์ํ๋ ์ธ์๋ก ์ ๋ฌ๋ ๊ฐ์ด๋ค.
Suspense ํ์ฉ
์์คํ์ค๋ฅผ ์ฌ์ฉํ๋ฉด ๋ ๋๋ง ์ดํ์ ์คํ๋๋ useEffect ๋ด๋ถ์์ ๋ฐ์ดํฐ ํจ์นญํ๋ ๋์ ๋ ๋๋ง ๋์ค์ ๋ฐ์ดํฐ ํจ์นญ์ ๊ฐ๋ฅํ๊ฒ ํด์ค๋ค.
๋ฐ์ดํฐ๋ฅผ ํจ์นญํ๋ ๋์ ์ฌ์ฉ์์๊ฒ ์ง์ ํ Fallback UI๋ฅผ ํ์ํ๋ค.
Suspense๋ฅผ ์ฌ์ฉํ ์ปดํฌ๋ํธ๊ฐ ๋ฐ์ดํฐ ํจ์นญ์ ์๋ํ ๋๋ง๋ค fallback์ ํ์ํ๋ค. (์บ์ฑ์ ๋ต์ ์ฌ์ฉํ์ง ์์๊ฒฝ์ฐ)
์์คํ์ค์ ํจ๊ป
stale-while-revalidate
์ ๋ต์ ์ฌ์ฉํ๋ ค๋ฉด concurrent ๊ธฐ๋ฅ์ ์ฌ์ฉํด์ผํ๋ค.
stale-while-revalidate๋?
์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๊ธฐ ์ํ HTTP ์บ์ฑ ์ ๋ต, ์ฌ์ฉ์์๊ฒ ์บ์๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐํํ๊ณ ๋์์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ ์บ์๋ฅผ ๊ฐฑ์ ํ๋ค.
์ฆ, ํ์ด์ง๋ฅผ ๋ณ๊ฒฝํ ๋ ๋ก๋ฉ ์ํ๋ก ๋์๊ฐ์ง ์๊ณ , ์ ๋ฐ์ดํฐ๋ฅผ ํ์ํ ์ ์์ ๋ ๊น์ง ์ด์ ๋ฐ์ดํฐ๋ฅผ ํ์ํ๋ ๋ฐฉ์
Last updated