virtual dom

    [ReactJS] React์˜ ํŠน์ง•๊ณผ Virtual DOM

    React์˜ ๋Œ€ํ‘œ์ ์ธ ํŠน์ง• 2๊ฐ€์ง€ ์„ ์–ธํ˜• (Declarative Programming) ๋ฆฌ์—‘ํŠธ๋Š” ์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ด๋‹ค. ์ ˆ์ฐจ์  vs ์„ ์–ธ์  ์ ˆ์ฐจ์ (๋ช…๋ นํ˜•) ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์ ˆ์ฐจ(How)์— ์ค‘์ ์„ ๋‘๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ง์ ‘ DOM์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ์‹ ๋ชจ๋“  ๊ณผ์ •์„ ์ผ์ผ์ด ๊ธฐ์ˆ ํ•ด์•ผ ํ•˜๋ฏ€๋กœ ์ƒ์‚ฐ์„ฑ์ด ์ €ํ•˜๋  ์ˆ˜ ์žˆ๋‹ค. ์„ ์–ธ์  ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๊ฐ€ ๋ฌด์—‡(What)์ธ์ง€ ์„ ์–ธํ•˜๋Š” ํ˜•ํƒœ๋กœ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํ•˜๋Š” ๋ฐฉ์‹ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ DOM ์กฐ์ž‘์€ React์— ์œ„์ž„ ์ปดํ“จํ„ฐ๋Š” ์ ˆ์ฐจ์ ์œผ๋กœ ๋™์ž‘ํ•˜๊ธฐ์— ๊ฒฐ๊ตญ ๋ชจ๋“  ๋ช…๋ น์„ ๋‹ค ์ ˆ์ฐจ์ ์œผ๋กœ ํ•ด์ฃผ์–ด์•ผ ํ•˜์ง€๋งŒ, ๊ฐœ๋ฐœ์„ ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋Š” (์ตœ๋Œ€ํ•œ ์ ˆ์ฐจ์ ์ธ ๋ถ€๋ถ„์€ ๊ฐ์ถ”๊ฐ€๋‚˜ ์œ„์ž„ํ•˜๊ณ ) ์„ ์–ธ์ ์ธ ๋ถ€๋ถ„์—๋งŒ ์ง‘์ค‘ํ•˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ์‹์ด ์„ ์–ธ์ ์ธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์ด๋‹ค. ์ปดํฌ๋„ŒํŠธ..