We want to hear from you!Take our 2021 Community Survey!
Support Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ Help Provide Humanitarian Aid to Ukraine.


The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside the React model if you need to.

import * as ReactDOM from 'react-dom';

If you use ES5 with npm, you can write:

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

The react-dom package also provides modules specific to client and server apps:


The react-dom package exports these methods:

These react-dom methods are also exported, but are considered legacy:


Both render and hydrate have been replaced with new client methods in React 18. These methods will warn that your app will behave as if itโ€™s running React 17 (learn more here).

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

React supports all modern browsers, although some polyfills are required for older versions.


We do not support older browsers that donโ€™t support ES5 methods or microtasks such as Internet Explorer. You may find that your apps do work in older browsers if polyfills such as es5-shim and es5-sham are included in the page, but youโ€™re on your own if you choose to take this path.



createPortal(child, container)

Creates a portal. Portals provide a way to render children into a DOM node that exists outside the hierarchy of the DOM component.



Force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.

// Force this state update to be synchronous.
flushSync(() => {
  setCount(count + 1);
// By this point, DOM is updated.


flushSync can significantly hurt performance. Use sparingly.

flushSync may force pending Suspense boundaries to show their fallback state.

flushSync may also run pending effects and synchronously apply any updates they contain before returning.

flushSync may also flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.

Legacy Reference


render(element, container[, callback])


render has been replaced with createRoot in React 18. See createRoot for more info.

Render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).


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

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

render()๋Š” ํ˜„์žฌ ReactComponent ๋ฃจํŠธ(root) ์ธ์Šคํ„ด์Šค์— ๋Œ€ํ•œ ์ฐธ์กฐ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ๋ฐ˜ํ™˜ ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ๋ ˆ๊ฑฐ์‹œ์ด๋ฉฐ React ์‹ ๊ทœ ๋ฒ„์ „์ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋น„๋™๊ธฐ๋กœ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ”ผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ReactComponent ์ธ์Šคํ„ด์Šค์˜ ์ฐธ์กฐ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด ๊ถŒ์žฅํ•˜๋Š” ํ•ด๊ฒฐ์ฑ…์€ ๋ฃจํŠธ ์—˜๋ฆฌ๋จผํŠธ์— ์ฝœ๋ฐฑ ref๋ฅผ ๋ถ™์ด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

render()๋ฅผ ์‚ฌ์šฉํ•ด ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋งํ•œ ์ปจํ…Œ์ด๋„ˆ์— ์ด๋ฒคํŠธ๋ฅผ ๋ณด์ถฉํ•˜๋Š” ๊ฒƒ์€ ๊ถŒ์žฅ๋˜์ง€ ์•Š์œผ๋ฉฐ React 17 ๋ฒ„์ „์—์„œ ์‚ญ์ œ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. hydrateRoot()๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”.


hydrate(element, container[, callback])


hydrate๋Š” React 18์—์„œ hydrateRoot๋กœ ๋Œ€์ฒด๋˜์—ˆ์Šต๋‹ˆ๋‹ค.ย ์ž์„ธํ•œ ๋‚ด์šฉ์€ hydrateRoot๋ฅผ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

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

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

์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด์—์„œ ๋‹จ์ผ ์—˜๋ฆฌ๋จผํŠธ์˜ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋‚˜ ํ…์ŠคํŠธ๊ฐ€ ๋ถˆ๊ฐ€ํ”ผํ•˜๊ฒŒ ๋‹ค๋ฅด๋‹ค๋ฉด(์˜ˆ๋ฅผ ๋“ค์–ด timestamp์˜ ๊ฒฝ์šฐ) ๊ทธ ์—˜๋ฆฌ๋จผํŠธ์— suppressHydrationWarning={true}๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๊ฒฝ๊ณ ๋ฅผ ๋Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ํ•œ ๋‹จ๊ณ„๊นŒ์ง€๋งŒ ์ž‘๋™ํ•˜๋ฉฐ ์˜๋„๋œ ํ•ด๊ฒฐ์ฑ…์ž…๋‹ˆ๋‹ค. ์ ˆ๋Œ€ ๋‚จ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”. ํ…์ŠคํŠธ๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด React๋Š” ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๊ณ ์น˜์ง€ ์•Š์„ ๊ฒƒ์ด๋ฉฐ ์ดํ›„์˜ ์—…๋ฐ์ดํŠธ๊นŒ์ง€ ์ผ์น˜ํ•˜์ง€ ์•Š์€ ์ฑ„๋กœ ๋‚จ์•„์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฐ„์˜ ์ฐจ์ด๋ฅผ ์˜๋„ํ•œ๋‹ค๋ฉด 2๋‹จ๊ณ„ ๋ Œ๋”๋ง์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ์—์„œ ๋‹ค๋ฅด๊ฒŒ ๋ Œ๋”๋ง ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” componentDidMount()์—์„œ true๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š” this.state.isClient์™€ ๊ฐ™์€ ์ƒํƒœ ๋ณ€์ˆ˜๋ฅผ ์ฝ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์œผ๋กœ ์ดˆ๊ธฐ ๋ Œ๋” ๋‹จ๊ณ„๋Š” ์„œ๋ฒ„์™€ ๊ฐ™์€ ์ฝ˜ํ…์ธ ๋ฅผ ๋ Œ๋”๋งํ•˜์—ฌ ๋ถˆ์ผ์น˜๋ฅผ ๋ฐฉ์ง€ํ•˜์ง€๋งŒ, ์ด๋ฒคํŠธ ๋ณด์ถฉ ์งํ›„์— ์ถ”๊ฐ€์ ์ธ ๋‹จ๊ณ„๊ฐ€ ๋™๊ธฐ์ ์œผ๋กœ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‘ ๋ฒˆ ๋ Œ๋”๋งํ•˜๊ฒŒ ๋งŒ๋“ค์–ด ์†๋„๋ฅผ ๋Š๋ฆฌ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ฃผ์˜๋ฅผ ๊ธฐ์šธ์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋Š๋ฆฐ ์—ฐ๊ฒฐ์—์„œ์˜ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์— ์œ ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. JavaScript ์ฝ”๋“œ๋Š” ์ตœ์ดˆ HTML ๋ Œ๋”๋ง๋ณด๋‹ค ๋งค์šฐ ๋Šฆ๊ฒŒ ๋กœ๋“œ๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ ํด๋ผ์ด์–ธํŠธ ์ „์šฉ ๋‹จ๊ณ„์—์„œ ๋‹ค๋ฅธ ๋ฌด์–ธ๊ฐ€๋ฅผ ๋ Œ๋”๋งํ•œ๋‹ค๋ฉด ๊ทธ ์ „ํ™˜ ๊ณผ์ •์—์„œ ๋ฐฉํ•ด๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ •์ƒ์ ์œผ๋กœ ์‹คํ–‰๋œ๋‹ค๋ฉด ์„œ๋ฒ„์— ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ โ€œshellโ€์„ ๋ Œ๋”๋งํ•˜๊ณ  ํด๋ผ์ด์–ธํŠธ์—์„œ ์ผ๋ถ€ ์ถ”๊ฐ€ ์œ„์ ฏ๋งŒ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ์ด ํšจ๊ณผ์ ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งˆํฌ์—… ๋ถˆ์ผ์น˜ ๋ฌธ์ œ์—†์ด ์ด ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๊ธธ ์›ํ•œ๋‹ค๋ฉด ์ด์ „ ๋‹จ๋ฝ์˜ ์„ค๋ช…์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”.




unmountComponentAtNode has been replaced with root.unmount() in React 18. See createRoot for more info.

๋งˆ์šดํŠธ๋œ React ์ปดํฌ๋„ŒํŠธ๋ฅผ DOM์—์„œ ์ œ๊ฑฐํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์™€ state๋ฅผ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ์ปจํ…Œ์ด๋„ˆ์— ์•„๋ฌด๋Ÿฐ ์ปดํฌ๋„ŒํŠธ๋„ ๋งˆ์šดํŠธ ๋˜์ง€ ์•Š์•˜๋‹ค๋ฉด ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋”๋ผ๋„ ์•„๋ฌด๋Ÿฐ ๋™์ž‘์„ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ ํ•ด์ œ๋˜์—ˆ๋‹ค๋ฉด true, ๋งˆ์šดํŠธ ํ•ด์ œํ•  ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.



findDOMNode๋Š” ๊ธฐ๋ณธ DOM ๋…ธ๋“œ๋ฅผ ์ด์šฉํ•˜๋Š” ๋ฐ์— ์‚ฌ์šฉ๋˜๋Š” ํ•ด๊ฒฐ์ฑ…์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ์—์„œ ์ด ํ•ด๊ฒฐ์ฑ…์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์ปดํฌ๋„ŒํŠธ ์ถ”์ƒํ™”๋ฅผ ์œ„๋ฐ˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ถŒ์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด ๋ฉ”์„œ๋“œ๋Š” StrictMode์—์„œ ๊ถŒ์žฅ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ DOM ๋‚ด๋ถ€์— ๋งˆ์šดํŠธ๋˜์—ˆ๋‹ค๋ฉด ์ปดํฌ๋„ŒํŠธ์— ํ•ด๋‹นํ•˜๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ๋ธŒ๋ผ์šฐ์ €์˜ DOM ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋Š” form ํ•„๋“œ ๊ฐ’์ด๋‚˜ DOM ์„ฑ๋Šฅ ์ธก์ •๊ณผ ๊ฐ™์ด DOM์—์„œ ๊ฐ’์„ ์ฝ์„ ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ์—์„œ DOM ๋…ธ๋“œ์— ref๋ฅผ ๋ถ™์ผ ์ˆ˜ ์žˆ์œผ๋ฉฐ findDOMNode๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์ „ํ˜€ ์—†์Šต๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ๊ฐ€ null์ด๋‚˜ false๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒฝ์šฐ findDOMNode์€ null์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฌธ์ž๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒฝ์šฐ findDOMNode์€ ๋ฌธ์ž ๊ฐ’์„ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š” ํ…์ŠคํŠธ DOM ๋…ธ๋“œ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. React 16๋ถ€ํ„ฐ ์ปดํฌ๋„ŒํŠธ๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ž์‹์„ ๊ฐ€์ง„ fragment๋ฅผ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ด ๊ฒฝ์šฐ์— findDOMNode๋Š” ๋น„์–ด์žˆ์ง€ ์•Š์€ ์ฒซ ๋ฒˆ์งธ ์ž์‹์— ํ•ด๋‹นํ•˜๋Š” DOM ๋…ธ๋“œ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.


findDOMNode๋Š” ๋งˆ์šดํŠธ๋œ ์ปดํฌ๋„ŒํŠธ์—๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค(์ฆ‰ ์ปดํฌ๋„ŒํŠธ๋Š” DOM ๋‚ด๋ถ€์— ์กด์žฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค). ์•„์ง ๋งˆ์šดํŠธ๋˜์ง€ ์•Š์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋Œ€์ƒ์œผ๋กœ ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค๋ฉด(์˜ˆ๋ฅผ ๋“ค์–ด ์•„์ง ์ƒ์„ฑ๋˜์ง€ ์•Š์€ ์ปดํฌ๋„ŒํŠธ์˜ render()์—์„œ findDOMNode()๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ) exception์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

findDOMNode์€ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

Is this page useful?Edit this page