react-dom ํŒจํ‚ค์ง€๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(๋ธŒ๋ผ์šฐ์ € DOM ํ™˜๊ฒฝ)์—์„œ๋งŒ ์ง€์›๋˜๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. React Native์—์„œ๋Š” ์ง€์›๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


API

์•„๋ž˜ API๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉํ•  ์ผ์€ ๊ฑฐ์˜ ์—†์Šต๋‹ˆ๋‹ค.

  • createPortal์„ ์‚ฌ์šฉํ•˜๋ฉด ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋ฅผ DOM ํŠธ๋ฆฌ์˜ ๋‹ค๋ฅธ ๋ถ€๋ถ„์— ๋ Œ๋”๋ง ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • flushSync๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด React๊ฐ€ State ์—…๋ฐ์ดํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ณ  ๋™๊ธฐ์ ์œผ๋กœ DOM์„ ์—…๋ฐ์ดํŠธํ•˜๋„๋ก ๊ฐ•์ œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Resource Preloading APIs

์•„๋ž˜ API๋Š” ์Šคํฌ๋ฆฝํŠธ, ์Šคํƒ€์ผ์‹œํŠธ, ๊ธ€๊ผด๊ณผ ๊ฐ™์€ ๋ฆฌ์†Œ์Šค๋ฅผ ๋ฏธ๋ฆฌ ๋กœ๋“œํ•˜์—ฌ ์•ฑ ์†๋„๋ฅผ ๊ฐœ์„ ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ํŠน์ • ๋ฆฌ์†Œ์Šค๊ฐ€ ์‚ฌ์šฉ๋  ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๊ธฐ ์ „์— ๋ฆฌ์†Œ์Šค๋ฅผ ๋ฏธ๋ฆฌ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React ๊ธฐ๋ฐ˜ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ๋ฆฌ์†Œ์Šค ๋กœ๋”ฉ์„ ์ž๋™์œผ๋กœ ์ฒ˜๋ฆฌํ•ด ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— API๋ฅผ ์ง์ ‘ ํ˜ธ์ถœํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์˜ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

  • preconnect๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์–ด๋–ค ๋ฆฌ์†Œ์Šค๊ฐ€ ํ•„์š”ํ•œ์ง€ ๋ชจ๋ฅด๋”๋ผ๋„ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋˜๋Š” ์„œ๋ฒ„์™€ ๋ฏธ๋ฆฌ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • prefetchDNS๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ ‘์†ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๋Š” DNS ๋„๋ฉ”์ธ์˜ IP ์ฃผ์†Œ๋ฅผ ๋ฏธ๋ฆฌ ์กฐํšŒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • preinit์„ ์‚ฌ์šฉํ•˜๋ฉด ์™ธ๋ถ€ ์Šคํฌ๋ฆฝํŠธ๋‚˜ ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ๋ฏธ๋ฆฌ ๊ฐ€์ ธ์˜ค๊ณ  ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • preinitModule์„ ์‚ฌ์šฉํ•˜๋ฉด ์™ธ๋ถ€ ESM ๋ชจ๋“ˆ์„ ๋ฏธ๋ฆฌ ๊ฐ€์ ธ์˜ค๊ณ  ํ‰๊ฐ€Evaluateํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.
  • preload๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์Šคํƒ€์ผ์‹œํŠธ, ๊ธ€๊ผด, ์ด๋ฏธ์ง€ ๋˜๋Š” ์™ธ๋ถ€ ์Šคํฌ๋ฆฝํŠธ ๊ฐ™์€ ๋ฆฌ์†Œ์Šค๋ฅผ ๋ฏธ๋ฆฌ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • preloadModule์„ ์‚ฌ์šฉํ•˜๋ฉด ์‚ฌ์šฉํ•  ESM ๋ชจ๋“ˆ์„ ๋ฏธ๋ฆฌ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ง„์ž…์ 

react-dom ํŒจํ‚ค์ง€๋Š” ๋‘ ๊ฐœ์˜ ์ง„์ž…์ Entry Points์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

  • react-dom/client๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ ํด๋ผ์ด์–ธํŠธ(๋ธŒ๋ผ์šฐ์ €)์— ๋ Œ๋”๋งํ•˜๋Š” API๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
  • react-dom/server๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„œ๋ฒ„์— ๋ Œ๋”๋งํ•˜๋Š” API๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

์ œ๊ฑฐ๋œ API

์•„๋ž˜ API๋Š” React 19์—์„œ ์ œ๊ฑฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.