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


APIs

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

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

Entry points

react-dom package ๋Š” ๋‘ ๊ฐœ์˜ ์ง„์ž…์ ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค:

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

Deprecated APIs

๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค

์ด API๋Š” ํ–ฅํ›„ React์˜ ๋ฉ”์ด์ € ๋ฒ„์ „์—์„œ ์ œ๊ฑฐ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

  • findDOMNode๋Š” ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค์™€ ์ผ์น˜ํ•˜๋Š” ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด DOM ๋…ธ๋“œ๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค.
  • hydrate๋Š” ํŠธ๋ฆฌ๋ฅผ ์„œ๋ฒ„ HTML์—์„œ ์ƒ์„ฑ๋œ DOM์œผ๋กœ ๋งˆ์šดํŠธํ•ฉ๋‹ˆ๋‹ค. ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์œผ๋ฉฐ hydrateRoot๋ฅผ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.
  • render๋Š” ํŠธ๋ฆฌ๋ฅผ DOM์œผ๋กœ ๋งˆ์šดํŠธํ•ฉ๋‹ˆ๋‹ค. ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์œผ๋ฉฐ createRoot๋ฅผ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.
  • unmountComponentAtNode๋Š” ํŠธ๋ฆฌ๋ฅผ DOM์—์„œ ๋งˆ์šดํŠธ ํ•ด์ œํ•ฉ๋‹ˆ๋‹ค. ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์œผ๋ฉฐ root.unmount()๋ฅผ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.