We want to hear from you!Take our 2021 Community Survey!
Try out a preview of the new React Docs!๐Ÿ‘‰ beta.reactjs.org

ReactDOMClient

react-dom/client ํŒจํ‚ค์ง€๋Š” ํด๋ผ์ด์–ธํŠธ์—์„œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ดˆ๊ธฐํ™”ํ•  ๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํด๋ผ์ด์–ธํŠธ ํŠนํ™” ํ•จ์ˆ˜๋“ค์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ์ปดํฌ๋„ŒํŠธ์˜ ๊ฒฝ์šฐ ์ด ๋ชจ๋“ˆ์ด ํ•„์š”ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

import * as ReactDOM from 'react-dom/client';

npm๊ณผ ํ•จ๊ป˜ ES5๋ฅผ ์‚ฌ์šฉ ์ค‘์ด๋ผ๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

var ReactDOM = require('react-dom/client');

๊ฐœ์š”

๋‹ค์Œ ํ•จ์ˆ˜๋“ค์„ ํด๋ผ์ด์–ธํŠธ ํ™˜๊ฒฝ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ € ์ง€์›

React๋Š” ๋ชจ๋“  ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €๋“ค์„ ์ง€์›ํ•˜๋ฉฐ, ๊ตฌ๋ฒ„์ „์€ ํด๋ฆฌํ•„์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์˜

React๋Š” Internet Explorer์™€ ๊ฐ™์ด ES5 ํ•จ์ˆ˜ ๋˜๋Š” ๋งˆ์ดํฌ๋กœํƒœ์Šคํฌ๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๊ตฌํ˜• ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด es5-shim ๋˜๋Š” es5-sham๊ณผ ๊ฐ™์€ ํด๋ฆฌํ•„์„ ํŽ˜์ด์ง€ ๋‚ด ํฌํ•จํ•œ ๊ฒฝ์šฐ ๊ตฌํ˜• ๋ธŒ๋ผ์šฐ์ €์—์„œ๋„ ๋™์ž‘ํ•  ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ, ์ด๋Ÿฌํ•œ ๋ฐฉ์‹์„ ์„ ํƒํ•œ๋‹ค๋ฉด ๋” ์ด์ƒ ๋„์›€์„ ๋“œ๋ฆด ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ฐธ์กฐ

createRoot()

Try the new React documentation for createRoot.

The new docs will soon replace this site, which will be archived. Provide feedback.

createRoot(container[, options]);

์ฃผ์–ด์ง„ container์— ๋Œ€ํ•ด React ๋ฃจํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ํ•ด๋‹น ๋ฃจํŠธ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜ํ™˜๋œ ๋ฃจํŠธ๋กœ render๋ฅผ ํ†ตํ•ด React ์—˜๋ฆฌ๋จผํŠธ๋ฅผ DOM์œผ๋กœ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const root = createRoot(container);
root.render(element);

createRoot๋Š” ๋‘ ๊ฐ€์ง€ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • onRecoverableError: React๊ฐ€ ์ž๋™์œผ๋กœ ์˜ค๋ฅ˜์—์„œ ๋ณต๊ตฌ๋˜์—ˆ์„ ๊ฒฝ์šฐ ์„ ํƒ์— ๋”ฐ๋ผ ์ฝœ๋ฐฑ์ด ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.
  • identifierPrefix: React๊ฐ€ React.useId์— ์˜ํ•ด ์ƒ์„ฑ๋œ ID๋ฅผ ์„ ํƒ์— ๋”ฐ๋ผ ์•ž์— ๋ง๋ถ™์ž…๋‹ˆ๋‹ค. ๋™์ผ ํŽ˜์ด์ง€์— ์—ฌ๋Ÿฌ ๋ฃจํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ์ถฉ๋Œ์„ ํšŒํ”ผํ•˜๋Š” ๋ฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์„œ๋ฒ„์—์„œ ์‚ฌ์šฉํ•œ ์ ‘๋‘์‚ฌ(Prefix)์™€ ๋ฐ˜๋“œ์‹œ ๋™์ผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ƒ์„ฑ๋œ ๋ฃจํŠธ๋Š” unmount๋กœ ๋งˆ์šดํŠธ ํ•ด์ œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

root.unmount();

์ฃผ์˜

createRoot()๋Š” ๋„˜๊ฒจ๋ฐ›์€ ์ปจํ…Œ์ด๋„ˆ ๋…ธ๋“œ์˜ ์ปจํ…์ธ ๋“ค์„ ์ œ์–ดํ•ฉ๋‹ˆ๋‹ค. ๋‚ด๋ถ€์— ์กด์žฌํ•˜๋Š” ๋ชจ๋“  DOM ์—˜๋ฆฌ๋จผํŠธ๋Š” ๋ Œ๋”๋ง์ด ํ˜ธ์ถœ๋˜๋ฉด ์ „๋ถ€ ๊ต์ฒด๋ฉ๋‹ˆ๋‹ค. ์ดํ›„์˜ ํ˜ธ์ถœ๋“ค์€ ํšจ์œจ์ ์ธ ๊ฐฑ์‹ ์„ ์œ„ํ•ด React์˜ DOM ๋น„๊ต ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

createRoot()๋Š” ๋„˜๊ฒจ๋ฐ›์€ ์ปจํ…Œ์ด๋„ˆ ๋…ธ๋“œ๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š์œผ๋ฉฐ, ์˜ค์ง ๊ทธ ์ž์‹๋งŒ์„ ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์กด DOM ๋…ธ๋“œ์— ์ด๋ฏธ ์กด์žฌํ•˜๋Š” ์ž์‹์— ๋Œ€ํ•ด ๋ฎ์–ด์“ฐ๊ธฐ ์—†์ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์„œ๋ฒ„ ๋ Œ๋”๋ง๋œ(server-rendered) ์ปจํ…Œ์ด๋„ˆ๋ฅผ hydrate ํ•˜๊ธฐ ์œ„ํ•ด createRoot()๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ๋Œ€์‹  hydrateRoot()๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.


hydrateRoot()

Try the new React documentation for hydrateRoot.

The new docs will soon replace this site, which will be archived. Provide feedback.

hydrateRoot(container, element[, options])

createRoot()๊ณผ ๋™์ผํ•˜์ง€๋งŒ, HTML ์ปจํ…์ธ ๊ฐ€ ReactDOMServer๋กœ ๋ Œ๋”๋ง๋œ ์ปจํ…Œ์ด๋„ˆ๋ฅผ hydrate ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. React๋Š” ๊ธฐ์กด ๋งˆํฌ์—…์— ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์—ฐ๊ฒฐํ•˜๋ ค ์‹œ๋„ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

hydrateRoot๋Š” ๋‘ ๊ฐ€์ง€ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • onRecoverableError: React๊ฐ€ ์ž๋™์œผ๋กœ ์˜ค๋ฅ˜์—์„œ ๋ณต๊ตฌ๋˜์—ˆ์„ ๊ฒฝ์šฐ ์„ ํƒ์— ๋”ฐ๋ผ ์ฝœ๋ฐฑ์ด ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.
  • identifierPrefix: React๊ฐ€ React.useId์— ์˜ํ•ด ์ƒ์„ฑ๋œ ID๋ฅผ ์„ ํƒ์— ๋”ฐ๋ผ ์•ž์— ๋ง๋ถ™์ž…๋‹ˆ๋‹ค. ๋™์ผ ํŽ˜์ด์ง€์— ์—ฌ๋Ÿฌ ๋ฃจํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ์ถฉ๋Œ์„ ํšŒํ”ผํ•˜๋Š” ๋ฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์„œ๋ฒ„์—์„œ ์‚ฌ์šฉํ•œ ์ ‘๋‘์‚ฌ(Prefix)์™€ ๋ฐ˜๋“œ์‹œ ๋™์ผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์˜

React๋Š” ๋ Œ๋”๋ง๋œ ์ปจํ…์ธ ๊ฐ€ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฐ„์— ๋™์ผํ•  ๊ฒƒ์ด๋ผ๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. React๊ฐ€ ํ…์ŠคํŠธ ์ปจํ…์ธ ์˜ ์ฐจ์ด๋ฅผ ๊ณ ์น  ์ˆ˜๋Š” ์žˆ์ง€๋งŒ ์ด๋Ÿฌํ•œ ๋ถˆ์ผ์น˜๋ฅผ ๋ฒ„๊ทธ๋กœ ์ทจ๊ธ‰ํ•˜์—ฌ ๊ณ ์ณ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ ๋ชจ๋“œ์—์„œ React๋Š” hydration ์ค‘์˜ ๋ถˆ์ผ์น˜์— ๋Œ€ํ•ด ๊ฒฝ๊ณ ํ•ฉ๋‹ˆ๋‹ค. ๋ถˆ์ผ์น˜ ์ƒํ™ฉ์—์„œ๋Š” ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ์ฐจ์ด๊ฐ€ ๊ณ ์ณ์งˆ ์ˆ˜ ์žˆ๋‹ค๊ณ  ๋ณด์žฅํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋Œ€๋‹ค์ˆ˜์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋ถˆ์ผ์น˜๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ๋งŽ์ง€ ์•Š์œผ๋ฉฐ, ๋ฐœ์ƒํ•  ๊ฒฝ์šฐ ๋ชจ๋“  ๋งˆํฌ์—…์„ ๊ฒ€์ฆํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ํฐ ๋น„์šฉ์„ ์ˆ˜๋ฐ˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ฑ๋Šฅ์ƒ์˜ ์ด์œ ๋กœ ์ค‘์š”ํ•œ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

Is this page useful?Edit this page