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์ ์ฆ๋ถ ๋ ๋๋ง์ ํ์ฑํํ๋ ๊ฒ์ ๋๋ค. ๋ ์ฝ๊ธฐ.