[TIL] React - Virtual DOM

dnjstdยท2022๋…„ 3์›” 22์ผ
0
post-thumbnail

๐Ÿ‘ฉโ€๐Ÿ’ป ์ด ํฌ์ŠคํŒ…์—์„œ๋Š” Virtual DOM์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.

Virtual DOM?

๐Ÿ“ ์‹ค์ œ DOM ๋ณ€ํ™”๋ฅผ ์ตœ์†Œํ™” ์‹œ์ผœ์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

๋ธŒ๋ผ์šฐ์ €๋Š” HTMLํŒŒ์ผ์„ ๋ณด์—ฌ์ฃผ๊ธฐ์œ„ํ•ด
๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ • DOM ํŠธ๋ฆฌ ์ƒ์„ฑ โ†’ CSSOM ํŠธ๋ฆฌ ์ƒ์„ฑ -> ๋ Œ๋” ํŠธ๋ฆฌ ์ƒ์„ฑ โ†’ Layout โ†’ Paint ๊ณผ์ •์„ ๊ฑฐ์นœ๋‹ค.
ํ™”๋ฉด์— ๋ณ€ํ™”๊ฐ€ ์ƒ๊ธธ ๋•Œ๋งˆ๋‹ค ๋งค๋ฒˆ ์ด ๊ณผ์ •์„ ๊ฑฐ์น˜๋Š” ๊ฒƒ์€ ๋น„ํšจ์œจ์ ์ด๋‹ค.

โœจ Virtual DOM์€ ๋ทฐ์˜ ๋ณ€ํ™”๋ฅผ Virtual DOM์— ์ ์šฉ์‹œํ‚ค๊ณ  ์ตœ์ข… ๊ฒฐ๊ณผ๋งŒ ์‹ค์ œ DOM์— ์ „๋‹ฌํ•œ๋‹ค.
๋”ฐ๋ผ์„œ 10๊ฐœ์˜ ๋ณ€ํ™”๊ฐ€ ์žˆ๋‹ค๋ฉด
1. Virtual DOM์€ ๋ณ€ํ™”๋œ ๋ถ€๋ถ„๋งŒ ๊ฐ€๋ ค๋‚ด์–ด
2. ์‹ค์ œ DOM์— ์ „๋‹ฌํ•˜๊ณ 
3. ์‹ค์ œ DOM์€ ๊ทธ ๋ณ€ํ™”๋ฅผ 1ํšŒ๋กœ ์ธ์‹ํ•˜์—ฌ
4. ๋‹จ ํ•œ๋ฒˆ์˜ ๋ Œ๋”๋ง ๊ณผ์ •๋งŒ ๊ฑฐ์น˜๊ฒŒ ๋œ๋‹ค.

DOM์ด ์ง์ ‘ ๋ณ€๊ฒฝ๋œ๋‹ค๋ฉด ์‚ฌ์†Œํ•œ ๋ณ€๊ฒฝ์‚ฌํ•ญ์—๋„ ์ „์ฒด๊ฐ€ ๋ Œ๋”๋ง๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ธŒ๋ผ์šฐ์ €์— ๊ณผ๋ถ€ํ•˜๊ฐ€ ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.
์ตœ๋Œ€ํ•œ DOM์— ์ง์ ‘ ์ ‘๊ทผํ•˜์ง€ ๋ง์•„์•ผ ํ•œ๋‹ค.

์ •๋ฆฌ

์ฆ‰! React๋Š” ์‹ค์ œ DOM์„ ๋งค๋ฒˆ ์กฐ์ž‘ํ•˜๋Š” ๋น„ํšจ์œจ์  ๋ฐฉ๋ฒ• ๋Œ€์‹ ์—, Virtual DOM์ด๋ผ๋Š” ๊ฐ€์ƒ์˜ ๋”์„ ์œ ์ง€ํ•˜๋ฉด์„œ ํ•„์š”ํ•œ ๋ถ€๋ถ„์„ ๋ฏธ๋ฆฌ ๊ณ„์‚ฐํ•˜์—ฌ ์‹ค์ œ DOM์—๋Š” ํ•œ๋ฒˆ์˜ ๋ณ€ํ™”๋ฅผ ๊ฐ€ํ•˜๋Š” ์‹์œผ๋กœ ์ตœ์ ํ™”๋ฅผ ๊ตฌํ˜„ํ•œ๋‹ค.

profile
Frontend Engineer ๐ŸŒฑ

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