Virtual DOM ๐ŸŸ

greenth322ยท2022๋…„ 7์›” 6์ผ
0

๊ธฐ์ˆ  ๋ฉด์ ‘ ์Šคํ„ฐ๋””

๋ชฉ๋ก ๋ณด๊ธฐ
1/3
post-thumbnail

What is DOM?

DOM์ด๋ž€, HTML ์ฝ”๋“œ๋ฅผ ํ•ด์„ํ•ด์„œ ์š”์†Œ๋“ค์„ ํŠธ๋ฆฌ ํ˜•ํƒœ๋กœ ๊ตฌ์กฐํ™”ํ•˜์—ฌ ์›น๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ๋‚˜ํƒ€๊ฒŒ ํ•ด์ฃผ๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

๐Ÿ“ DOM์˜ ํŠน์ง•

  1. DOM์„ JavaScript๋ฅผ ํ†ตํ•ด ๋ฌธ์„œ์™€ ๋ฌธ์„œ ์š”์†Œ์— ์ ‘๊ทผํ•˜์—ฌ ์›น ํ™”๋ฉด์˜ ์ฝ˜ํ…์ธ ๋ฅผ ์ถ”๊ฐ€, ์ˆ˜์ •, ์‚ญ์ œ ๋˜๋Š” ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค.

  2. DOM์€ ๋‹ค๋ฅธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋“ค๋กœ๋ถ€ํ„ฐ ๋…๋ฆฝ์ ์ด๊ธฐ ๋•Œ๋ฌธ์—, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋งŒ ๊ฐ–์ถฐ์ ธ ์žˆ๋‹ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋‹ค๋ฅธ ์–ธ์–ด๋กœ๋„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค. ex) python xml.dom.minidom

  3. DOM์€ ๋…ธ๋“œ๋“ค์˜ ํŠธ๋ฆฌ ๊ตฌ์กฐ ๋ชจ์–‘์„ ํ•˜๊ณ  ์žˆ๋‹ค.
    ๋…ธ๋“œ๋ž€? ๋ชจ๋“  HTML ์š”์†Œ๋“ค์„ ํฌํ•จํ•˜๊ณ  ์žˆ์œผ๋ฉฐ event.target์˜ ๋Œ€์ƒ์ด ๋˜๋Š” ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ์‰ฝ๋‹ค.

๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ์•„๋ณด๋Š” Rendering Process

  1. Parsing
    DOM ํŠธ๋ฆฌ์™€ CSSOM ํŠธ๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด๋‚ธ๋‹ค.

  2. Style
    DOM ํŠธ๋ฆฌ์™€ CSSOM ํŠธ๋ฆฌ๋ฅผ ๋งค์นญํ•˜์—ฌ Render Tree๋ฅผ ๋งŒ๋“ค๊ณ  ๋ Œ๋”๋ง์— ํ•„์š”ํ•œ ๋…ธ๋“œ๋งŒ ํฌํ•จํ•œ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด display:none๊ณผ ๊ฐ™์€ ์†์„ฑ์„ ๊ฐ€์ง„ ์š”์†Œ๋Š” ๋ Œ๋”ํŠธ๋ฆฌ์— ํฌํ•จ๋˜์ง€ ์•Š๋Š”๋‹ค.

  3. Layout
    ๋„ˆ๋น„, ๋†’์ด, postion ๋“ฑ ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ด€๋ จ๋œ ๊ฒƒ์„ ๋ Œ๋”ํŠธ๋ฆฌ์— ์ „๋‹ฌํ•œ๋‹ค. ๋ฆฌ๋ Œ๋”๋ง์‹œ์—๋Š” reflow๋ผ๊ณ  ํ•œ๋‹ค.

  4. Paint
    ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ด€๋ จ์ด ์—†๋Š” ๋‚˜๋จธ์ง€ ๋ชจ๋“  ๋””์ž์ธ ์†์„ฑ์„ ๋ Œ๋”ํŠธ๋ฆฌ์— ์ „๋‹ฌํ•œ๋‹ค, ๋ฆฌ๋ Œ๋”๋ง์—์„œ๋Š” repaint๋ผ๊ณ  ํ•œ๋‹ค.

  5. Composition
    ์ปดํฌ์ง€ํŒ… : ํ™”๋ฉด์—์„œ ๋ณด์—ฌ์ง€๊ฒŒ ํŽ˜์ธํŠธ๋œ ๋ถ€๋ถ„์„ ํ•ฉ์น˜๋Š” ๊ณผ์ •

๋ธŒ๋ผ์šฐ์ € ์„ฑ๋Šฅ์€ ๋ ˆ๋”๋ง ๊ณผ์ •์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์žก์•„ ๋จน๊ณ  ํŠธ๊ธฐ ๋‹ค์‹œ ๋ ˆ์ด์•„์›ƒ์„ ์žก๊ธฐ ์œ„ํ•œ reflow ๋‹จ๊ณ„๊ฐ€ ๊ฐ€์žฅ ํฌ๋‹ค. ์ด๋ ‡๊ฒŒ ๋ฆฌ๋ Œ๋”๋ง ์‹œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๋ฅผ ์œ„ํ•ด ๋” ๊ฐ€๋ณ๊ฒŒ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๊ณ ์•ˆ๋œ ๊ฒƒ์ด virtual DOM

Virtual DOM

๊ฐ€์ƒ๋”์€ ํ•œ๋งˆ๋””๋กœ DOM์˜ ๊ตฌ์กฐ๋ฅผ ํ‰๋‚ด๋‚ธ ์‹ค์žฌํ•˜์ง€ ์•Š๋Š” ๋”์ด๋‹ค. ๋‘ฅ๋‘ฅ ์–ด๋”˜๊ฐ€ ๋– ๋‹ค๋‹ˆ๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ์ƒํ•˜๋ฉด ํŽธํ•˜๋‹ค.

์‹ค์ œ Browser DOM์€ ๋ฌด๊ฒ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€์ƒ๋”์€ ์ž๋ธŒ์Šคํฌ๋ฆฝํŠธ ์˜ค๋ธŒ์ ํŠธ๋กœ ๋งŒ๋“ค์–ด์„œ ๋จผ์ € ๋ฉ”๋ชจ๋ฆฌ์—์„œ ์‹œ๋ฎฌ๋ ˆ์ด์…˜์„ ๋Œ๋ ค์„œ ์ด์ „๊ณผ ๋‹ฌ๋ผ์ง„ ๋ถ€๋ถ„์„ ๋น„๊ตํ•ด์„œ ์ฐจ์ด๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ๊ฒฝ์ œ์ ์œผ๋กœ DOM์— ๋ณ€ํ™”๋ฅผ ๋ฐ˜์˜ํ•œ๋‹ค.

์ด๋Ÿฌํ•œ Virtual DOM์„ ์ฑ„ํƒํ•˜์—ฌ ์‚ฌ์šฉ ํ•˜๋Š” ๊ฒƒ์ด React์™€ Vue๊ฐ€ ์žˆ์œผ๋ฉฐ,Virtual DOM์œผ๋กœ SPA์„ ๊ตฌํ˜„ํ•˜์—ฌ ๋ถˆํ•„์š”ํ•œ ๋ Œ๋”๋ง์„ ์ค„์ด๊ณ  ๊นœ๋นก์ž„ ์—†๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค์–ด๋‚ธ๋‹ค.

๊ฐ€์ƒ๋”์ด ์ œ์ผ ๋น ๋ฅธ๊ฐ€?

๊ทธ๋ ‡์ง€๋Š” ์•Š๋‹ค. ์‹ค์ œ๋กœ ๊ฐ€์ƒ๋”์„ ๋งŒ๋“ค์–ด๋‚ด๋Š” ๊ณผ์ •์กฐ์ฐจ ์—†์ด ์ฝ”๋”ฉ ํ›„ ๋ฐ”๋กœ ๋นŒ๋“œํ•˜๋ฉด ์ฆ‰์‹œ ์ปดํฌ๋„ŒํŠธ๋ฅผ DOM์œผ๋กœ ๋ฐ˜์˜ํ•˜๋Š” ๋ณ„๋„์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—†์ด ๋™์ž‘ํ•˜๋Š” svelte๋„ ์žˆ๋‹ค. (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•„๋‹Œ ์ปดํŒŒ์ผ๋Ÿฌ)

ํ•˜์ง€๋งŒ ์•„์ง ์Šค๋ฒจํŠธ๋Š” ๋งค์šฐ ์ž‘์€ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ํ˜•์„ฑํ•˜๊ณ  ์žˆ๊ณ  ์•„์ง์€ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ๋“ค์ด ๋น„๋ฏธํ•˜๊ณ  ๋Œ€๊ทœ๋ชจ ์„œ๋น„์Šค์—๋Š” ์ ์ ˆํ•˜์ง€ ์•Š์€ ๋‹จ์ ๋„ ์กด์žฌํ•œ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€