useSyncExternalStore

์™ธ๋ถ€ ์Šคํ† ์–ด๋ฅผ ๊ตฌ๋…ํ•  ์ˆ˜ ์žˆ๋Š” React Hook

React๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ด€์‹ฌ์‚ฌ ๋ฐ–์—์„œ ๋™์ž‘ํ•˜๋Š” External Store์˜ ์ƒํƒœ ํ๋ฆ„์„ ๊ด€์ฐฐํ•˜์ง€ ์•Š๋Š”๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ useSyncExternalStore ํ›…์„ ์‚ฌ์šฉํ•˜๋ฉด External Store๋ฅผ ๊ตฌ๋…(๊ด€์ฐฐ)ํ•˜์—ฌ ์ƒํƒœ ๋ณ€ํ™”์— ๋Œ€ํ•œ ์•Œ๋ฆผ์„ ์ œ๊ณต ๋ฐ›๋Š”๋‹ค.

ํ•ด๋‹น ํ›…์ด ๋‚˜์˜ค๊ฒŒ๋œ ์ด์œ 

  • concurrent feature์˜ tearing ํ˜„์ƒ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•˜๋‹ค.

  • Extenral Store์˜ ๋ณ€๊ฒฝ์‚ฌํ•ญ์„ ๊ตฌ๋…ํ•˜๊ณ , tearing์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก Extenral Store์˜ ๋ณ€๊ฒฝ์‚ฌํ•ญ์„ ๊ฐ์ง€ํ•˜์—ฌ ๋ฆฌ๋ Œ๋”๋ง์„ ์‹œ์ผœ์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

์ž‘๋™ ๋ฐฉ์‹

function useSyncExternalStore<Snapshot>(
  subscribe: (onStoreChange: () => void) => () => void,
  getSnapshot: () => Snapshot,
  getServerSnapshot?: () => Snapshot
}: Snapshot

subscribe

์Šคํ† ์–ด์— ๋ณ€๊ฒฝ์‚ฌํ•ญ์„ ๊ตฌ๋…ํ•˜๊ธฐ ์œ„ํ•œ ์ฝœ๋ฐฑํ•จ์ˆ˜

  • ์ „๋‹ฌ๋œ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด React์—๊ฒŒ ์Šคํ† ์–ด๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฏ€๋กœ ๋ฆฌ๋ Œ๋”๋ง์ด ํ•„์š”ํ•˜๋‹ค๊ณ  ์•Œ๋ฆฐ๋‹ค.

ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋Š” ๋งค ๋ Œ๋”๋ง๋งˆ๋‹ค ๋‚ด๋ถ€ ํ•จ์ˆ˜๋ฅผ ๋‹ค์‹œ ์„ ์–ธํ•˜๊ฒŒ ๋˜์–ด์„œ, ๊ตฌ๋… ํ•จ์ˆ˜๋„ ๋งค ๋ Œ๋”๋ง๋งˆ๋‹ค ๋‹ฌ๋ผ์ง€๊ฒŒ ๋˜๋Š”๋ฐ ์ด๋กœ ์ธํ•ด ๋ฆฌ์•กํŠธ๋Š” ์ƒˆ๋กœ ์ „๋‹ฌ๋œ ๊ตฌ๋… ํ•จ์ˆ˜๋กœ ์Šคํ† ์–ด๋ฅผ ๋‹ค์‹œ ๊ตฌ๋…ํ•˜๋Š” side-effect๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋œ๋‹ค.

์ด๋Ÿฌํ•œ ๋ถˆํ•„์š”ํ•œ ์Šคํ† ์–ด ๊ตฌ๋…์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” useCallback์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•จ์ˆ˜๋ฅผ ๋ฉ”๋ชจ์ด์ œ์ด์…˜ํ•˜๊ฑฐ๋‚˜, ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ญ์ƒ ๊ฐ™์€ ๋ฉ”์„œ๋“œ๋ฅผ ์ฐธ์กฐํ•˜๋„๋ก ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.

getSnapshot

์Šคํ† ์–ด์˜ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜

React๊ฐ€ ์Šคํ† ์–ด์—์„œ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค.

  • ํŠน์ • ์‹œ์ ์˜ ์Šคํ† ์–ด์˜ ์ƒํƒœ๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ ๋–„๋ฌธ์— snapshot์ด๋ž€ ๋„ค์ด๋ฐ์„ ์‚ฌ์šฉํ•œ๋‹ค.

  • subscribe์— ๋“ฑ๋กํ•œ ์ฝœ๋ฐฑํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ๋งˆ๋‹ค ๋ฆฌ์—‘ํŠธ๋Š” getSnapshot ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ตœ์‹  ์Šคํ† ์–ด ์ƒํƒœ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ๋ฆฌ๋ Œ๋”๋ง ์‹œํ‚จ๋‹ค.

  • ๋ฆฌ์•กํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง์ด ์‹œ์ž‘๋  ๋•Œ getSnapshot ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋ฐ˜ํ™˜๋œ ๊ฐ’(์Šคํ† ์–ด์˜ ์ƒํƒœ)๋ฅผ ์บ์‹ฑํ•˜๊ณ , ๋ Œ๋”๋ง ์ดํ›„ ์Šคํ† ์–ด๊ฐ€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์•˜๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ํ•œ๋ฒˆ ๋” ํ˜ธ์ถœํ•ด์„œ ์ด์ „์— ์บ์‹œํ•œ ์Šคํ† ์–ด ์ƒํƒœ์™€ ๋น„๊ตํ•ด ๋‹ค๋ฅธ ๊ฒฝ์šฐ์—๋งŒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ๋ฆฌ๋ Œ๋”๋งํ•œ๋‹ค.

  • ์ฆ‰, ๋ Œ๋”๋ง์ด ์‹œ์ž‘๋  ๋•Œ์™€ ๋ Œ๋”๋ง ์ดํ›„์— ํ•œ ๋ฒˆ๋” getSanpshot์„ ํ˜ธ์ถœํ•˜์—ฌ ์ตœ์‹  ์Šคํ† ์–ด ์ƒํƒœ์™€ Sync(๋™๊ธฐํ™”)์‹œํ‚จ๋‹ค.

์Šคํ† ์–ด์˜ ์ƒํƒœ๋ฅผ ์บ์‹ฑํ•  ๋•Œ๋Š” ๊ฐ’์„ ๋ณต์‚ฌํ•˜๋Š” ๋Œ€์‹  ๊ทธ๋Œ€๋กœ ์ €์žฅํ•˜๋ฉฐ, ์ด์ „ ์Šคํ† ์–ด์˜ ์ƒํƒœ์™€ ๋น„๊ตํ•  ๋•Œ๋Š” ์–•์€ ๋น„๊ต(Object.is)๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

๋”ฐ๋ผ์„œ ์Šคํ† ์–ด์˜ ์ƒํƒœ๋ฅผ ๋ถˆ๋ณ€(immutable)ํ•˜๊ฒŒ ์œ ์ง€ํ•ด์•ผ ๋ฆฌ์—‘ํŠธ๊ฐ€ ์Šคํ† ์–ด์˜ ๋ณ€๊ฒฝ์‚ฌํ•ญ์„ ๊ฐ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค.

getSnapshot ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ์›๋ณธ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜ํ™˜ํ•ด์•ผ ํ•œ๋‹ค.

๋งŒ์•ฝ ํ•ญ์ƒ ์ƒˆ๋กœ์šด ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค๋ฉด ๋ฌดํ•œ ๋ฆฌ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ฃผ์˜

// getSnapshot์ด ํ•ญ์ƒ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฏ€๋กœ ๋ฌดํ•œ ๋ฆฌ๋ Œ๋”๋ง ๋ฐœ์ƒ
const snapshot = useSyncExternalStore(subscribe, () => ({newValue: store.value}))

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๋Š” ํ•ด๋‹น โŒ)

// import {startTransition} from 'react'; ๋…๋ฆฝ์ ์œผ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
import {useTransition} from 'react';

//...
const [isPending, startTransition] = useTransition();

<input
  value={filter}
  onChange={(e) => {
    setFilter(e.target.value);
      startTransition(() => {
      // ์—ฌ๊ธฐ์„œ `delayedFilter`์˜ ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๋Š” ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋‚ฎ์€ ์—…๋ฐ์ดํŠธ๋ฅผ ๋ฐœ์ƒ
      setDelayedFilter(e.target.value);
    });
  }}
/>
//isPending์„ ์‚ฌ์šฉํ•ด ํŠธ๋žœ์ง€์…˜์ด ๋ณด๋ฅ˜ ์ค‘์ž„์„ ์•Œ๋ฆด ์ˆ˜ ์žˆ๋‹ค.
{isPending && 'Recalculating...'}

useDefferedValue

๋ช…๋ นํ˜• ๋ฐฉ์‹์ธ startTransition์™€ ๋‹ฌ๋ฆฌ ์„ ์–ธํ˜•์œผ๋กœ ๋™์‹œ์„ฑ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋‚ฎ์€ ์—…๋ฐ์ดํŠธ์˜ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉฐ, ์ด ์ƒํƒœ๋Š” ์ธ์ž๋กœ ์ „๋‹ฌ๋œ ๊ฐ’์ด๋‹ค.

export default function App() {
  // ์ด ์ƒํƒœ๋Š” ์šฐ์„ ์ˆœ์œ„๊ฐ€ "๋†’์€" ์—…๋ฐ์ดํŠธ์— ์˜ํ•ด ์—…๋ฐ์ดํŠธ๋œ๋‹ค.
  const [filter, setFilter] = useState('');
  // ์ด ์ƒํƒœ๋Š” ์šฐ์„ ์ˆœ์œ„๊ฐ€ "๋‚ฎ์€" ์—…๋ฐ์ดํŠธ์— ์˜ํ•ด ์—…๋ฐ์ดํŠธ๋œ๋‹ค.
  const deferredFilter = useDeferredValue(filter);

  return (
    <div className="container">
      <input
        value={filter}
        onChange={(e) => {
          setFilter(e.target.value);
        }}
      />
      <List filter={deferredFilter} />
    </div>
  );
}

Suspense ํ™œ์šฉ

์„œ์ŠคํŽœ์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ Œ๋”๋ง ์ดํ›„์— ์‹คํ–‰๋˜๋Š” useEffect ๋‚ด๋ถ€์—์„œ ๋ฐ์ดํ„ฐ ํŒจ์นญํ•˜๋Š” ๋Œ€์‹  ๋ Œ๋”๋ง ๋„์ค‘์— ๋ฐ์ดํ„ฐ ํŒจ์นญ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.

  • ๋ฐ์ดํ„ฐ๋ฅผ ํŒจ์นญํ•˜๋Š” ๋™์•ˆ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ง€์ •ํ•œ Fallback UI๋ฅผ ํ‘œ์‹œํ•œ๋‹ค.

  • Suspense๋ฅผ ์‚ฌ์šฉํ•œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฐ์ดํ„ฐ ํŒจ์นญ์„ ์‹œ๋„ํ•  ๋•Œ๋งˆ๋‹ค fallback์„ ํ‘œ์‹œํ•œ๋‹ค. (์บ์‹ฑ์ „๋žต์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„๊ฒฝ์šฐ)

  • ์„œ์ŠคํŽœ์Šค์™€ ํ•จ๊ป˜ stale-while-revalidate ์ „๋žต์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด concurrent ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค.

stale-while-revalidate๋ž€?

  • ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•œ HTTP ์บ์‹ฑ ์ „๋žต, ์‚ฌ์šฉ์ž์—๊ฒŒ ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ๋™์‹œ์— ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€ ์บ์‹œ๋ฅผ ๊ฐฑ์‹ ํ•œ๋‹ค.

  • ์ฆ‰, ํŽ˜์ด์ง€๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ ๋กœ๋”ฉ ์ƒํƒœ๋กœ ๋Œ์•„๊ฐ€์ง€ ์•Š๊ณ , ์ƒˆ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์„ ๋•Œ ๊นŒ์ง€ ์ด์ „ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ์‹

Last updated