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

Virtual DOM๊ณผ Internals

Virtual DOM์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

Virtual DOM (VDOM)์€ UI์˜ ์ด์ƒ์ ์ธ ๋˜๋Š” โ€œ๊ฐ€์ƒโ€์ ์ธ ํ‘œํ˜„์„ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅํ•˜๊ณ  ReactDOM๊ณผ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์˜ํ•ด โ€œ์‹ค์ œโ€ DOM๊ณผ ๋™๊ธฐํ™”ํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ๋…์ž…๋‹ˆ๋‹ค. ์ด ๊ณผ์ •์„ ์žฌ์กฐ์ •์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์ด ์ ‘๊ทผ๋ฐฉ์‹์ด React์˜ ์„ ์–ธ์  API๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. React์—๊ฒŒ ์›ํ•˜๋Š” UI์˜ ์ƒํƒœ๋ฅผ ์•Œ๋ ค์ฃผ๋ฉด DOM์ด ๊ทธ ์ƒํƒœ์™€ ์ผ์น˜ํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฐฉ์‹์€ ์•ฑ ๊ตฌ์ถ•์— ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ์กฐ์ž‘, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ, ์ˆ˜๋™ DOM ์—…๋ฐ์ดํŠธ๋ฅผ ์ถ”์ƒํ™”ํ•ฉ๋‹ˆ๋‹ค.

โ€œvirtual DOMโ€์€ ํŠน์ • ๊ธฐ์ˆ ์ด๋ผ๊ธฐ๋ณด๋‹ค๋Š” ํŒจํ„ด์— ๊ฐ€๊น๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ๋žŒ๋“ค๋งˆ๋‹ค ์˜๋ฏธํ•˜๋Š” ๋ฐ”๊ฐ€ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. React์˜ ์„ธ๊ณ„์—์„œ โ€œvirtual DOMโ€์ด๋ผ๋Š” ์šฉ์–ด๋Š” ๋ณดํ†ต ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฐ์ฒด์ด๊ธฐ ๋•Œ๋ฌธ์— React elements์™€ ์—ฐ๊ด€๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ React๋Š” ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ์— ๋Œ€ํ•œ ์ถ”๊ฐ€ ์ •๋ณด๋ฅผ ํฌํ•จํ•˜๊ธฐ ์œ„ํ•ด โ€œfibersโ€๋ผ๋Š” ๋‚ด๋ถ€ ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ React์—์„œ โ€œvirtual DOMโ€ ๊ตฌํ˜„์˜ ์ผ๋ถ€๋กœ ๊ฐ„์ฃผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Shadow DOM์€ Virtual DOM๊ณผ ๊ฐ™์€๊ฐ€์š”?

์•„๋‹ˆ์š”, ๋‘˜์€ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. Shadow DOM์€ ์ฃผ๋กœ ์›น ์ปดํฌ๋„ŒํŠธ์˜ ๋ฒ”์œ„ ์ง€์ • ๋ณ€์ˆ˜ ๋ฐ CSS์šฉ์œผ๋กœ ์„ค๊ณ„๋œ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค. virtual DOM์€ ๋ธŒ๋ผ์šฐ์ € API ์œ„์— ์žˆ๋Š” JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๊ตฌํ˜„๋˜๋Š” ๊ฐœ๋…์ž…๋‹ˆ๋‹ค.

โ€œReact Fiberโ€๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?

Fiber๋Š” React 16์˜ ์ƒˆ๋กœ์šด ์žฌ์กฐ์ • ์—”์ง„์ž…๋‹ˆ๋‹ค. ์ด ํ”„๋กœ๊ทธ๋žจ์˜ ์ฃผ์š” ๋ชฉํ‘œ๋Š” virtual DOM์˜ ์ฆ๋ถ„ ๋ Œ๋”๋ง์„ ํ™œ์„ฑํ™”ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋” ์ฝ๊ธฐ.

Is this page useful?Edit this page