๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ“ Study/โ„๏ธ React

useSyncExternalStore? ๐Ÿ’ก ํ•™์Šต ๊ณต์œ  ์Šคํ„ฐ๋””์—์„œ ๋ฐœํ‘œ๋ฅผ ์œ„ํ•ด ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. ๐Ÿค ๋น ๋ฅธ ์ž‘์„ฑ์„ ์œ„ํ•ด ์Œ์Šด์ฒด๋กœ ์ž‘์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. โ˜ ๏ธ ํ•™์Šต ์ค‘์— ์ž‘์„ฑํ•œ ๊ธ€์ด๋ฏ€๋กœ ๋‚ด์šฉ์— ์˜ค๋ฅ˜๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค! ๐Ÿฅฐ ์˜ค๋ฅ˜๋ฅผ ๋ฐœ๊ฒฌํ•˜์‹ ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! โœ”๏ธ useSyncExternalStore ์™œ ๋‚˜์˜ด? 1. React 18์˜ ํ˜์‹ , Concurrency React ํŒ€์€ React 18์„ ๋ฐœํ‘œํ•˜๋ฉด์„œ, ์ด๋ฒˆ ๋ฆด๋ฆฌ์ฆˆ๋Š” ๋™์‹œ์„ฑ(Concurrency) ์˜ ๋„์ž…์œผ๋กœ ๋ Œ๋”๋ง ์—”์ง„ ๊ฐœ์„ (์ž๋™๋ฐฐ์นญ)๊ณผ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ํ–ฅ์ƒ(transition, suspense)์— ์ง‘์ค‘ํ–ˆ๋‹ค๊ณ  ํ•จ. ๋™์‹œ์„ฑ์ด ๋จผ๋””? ์ด๋ฆ„ ๊ทธ๋Œ€๋กœ ์ˆœ์„œ์— ์ƒ๊ด€์—†์ด ๋™์‹œ์— ์ˆ˜ํ–‰ ๋  ์ˆ˜ ์žˆ๋Š” ์„ฑ์งˆ. ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ ์ธ ๊ฐœ๋…์œผ๋กœ ๋งํ•˜๋ฉด ํ”„๋กœ๊ทธ๋žจ์„ ๋…๋ฆฝ์ ์œผ๋กœ ์‹คํ–‰๋  ์ˆ˜ ์žˆ๋Š” ์—ฌ๋Ÿฌ ์กฐ๊ฐ์œผ๋กœ ๋‚˜๋ˆ„์–ด .. ๋”๋ณด๊ธฐ