๐ก ์ด์ ์๋ ๊ทธ๋ฅ '๊ทธ๋ ๊ตฌ๋.' ํ๋ฉด์ ๋์ด๊ฐ๋ DOM๊ณผ Virtual DOM์ ๊ฐ๋ ์ ์ธ ์ธก๋ฉด์์ ์ ๊ทผํ๋ฉฐ ์์๋ณด๋ฉด์ ์ Virtual DOM์ด ๋ฑ์ฅํ๋์ง ์ข ๋ ๊น๊ฒ ์์๋ณผ ์ ์๋ ์๊ฐ์ด์์ต๋๋ค.
๐ก ๋ถ๋ณ์ฑ์ ๋ํด ์ดํดํ๊ธฐ ์ํด ๊ธฐ๋ณธํ ๋ฐ์ดํฐ์ ์ฐธ์กฐํ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ํ ๋ฒ ๊ณฑ์น์ด ๋ณผ ์ ์๋ ์๊ฐ์ ๊ฐ์ก์ต๋๋ค.
1. DOM ๊ณผ Virtual DOM(๊ฐ์ DOM)
DOM ์ ๋ํ ๊ฐ๋จํ ์ค๋ช ํ Virtual Dom ์ด ์ ํ์ํ์ง, ๊ทธ๋ฆฌ๊ณ props์ state์ ๋ํด ์๊ธฐํ๊ณ ์ ํ๋ค.
1.1 DOM
โช ๋จผ์ , ๋ ๋๋ง์ ๋ํด์ ๋งํ๊ณ ์ ํ๋ค. ๋ ๋๋ง์ด๋ผ๋ ๊ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ ํด๋ผ์ด์ธํธ๊ฐ ์๊ฐ์ ์ผ๋ก ๋ณผ ์ ์๋๋ก ํ๋ฉด์ ์ถ๋ ฅํ๋ ๋จ๊ณ๋ฅผ ์๋ฏธํ๋ค. ์ด ๋ ๋๋ง์ด ๊ฐ๋ฅํ๋๋ก ๋ธ๋ผ์ฐ์ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ ๋๋ง ์์ง์ด๋ผ๋ ๊ฒ์ด ์๋ค.
โช ๊ทธ๋ฐ๋ฐ ๋ธ๋ผ์ฐ์ ๋ ๋ ๋๋ง ์ด์ ์ ํ์ฑ์ด๋ผ๋ ๊ณผ์ ์ ๊ฑฐ์น๋ค. ํ์ฑ์ HTML ๋ฌธ์[ํ์ผ]๋ฅผ ํด์ํ๋ ๋จ๊ณ์ด๋ค.
๋ ๋๋ง ์์ง์ด HTML ๋ฌธ์์ ์ฝ๋ ํ ์ค, ํ ์ค ๋ณด๋ฉด์ ํด์์ ํ๋ค. ํด์์ ํ๋ค๋ ๊ฒ์ ์๋ฒ๋ก๋ถํฐ ๋ฐ์์จ HTML๋ฌธ์๋ฅผ javascript๊ฐ ๋ฐ๋ก ์ดํดํ ์ ์๊ธฐ ๋๋ฌธ์ javascript๊ฐ ์์๋ค์ ์ ์๋ ๋ฐฉ์์ผ๋ก ํด์์ ํ๋ค๋ ๊ฒ์ด๋ค.
๋ธ๋ผ์ฐ์ ๋ ๊ทธ๋ ๊ฒ Javascript๊ฐ ์์๋ค์ ์ ์๋ ๋ฐฉ์์ผ๋ก ํด์ํ ๋ด์ฉ์ ํ ๋๋ก DOM tree๋ฅผ ๊ตฌ์ฑํ๋ค.
๋ฐ์ ์์ ์ฌ์ง์ฒ๋ผ ๋ง์ด๋ค.

โช ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์์๋ค์ ์ ์๋ ๋ฐฉ์์ผ๋ก ํด์ํ DOM Tree ๋ฟ๋ง ์๋๋ผ CSSOM Tree ๋ผ๋ ๊ฒ์ ๋ฌถ์ด์ Render Tree ๋ฅผ ๊ตฌ์ฑํ๊ฒ ๋๋ค. ์ด ๋ Render Tree ๋ผ๋ ๊ฒ์ HTML, CSS ๋ฐ JavaScript ๋ฌธ์๋ฅผ ํ์ฑ(๋ฌธ์[ํ์ผ]๋ฅผ ํด์)ํ์ฌ
๋ธ๋ผ์ฐ์ ์์ ์ค์ ๋ก ๋ ๋๋ง๋๋ ์ต์ข ๋ฌธ์ ๋ชจ๋ธ์ ๋ํ๋ด๋ ๊ฐ์ฒด์ ๊ณ์ธต ๊ตฌ์กฐ์ด๋ค. ์ฝ๊ฒ ๋งํด์ ํ๋ฉด์ ๊ทธ๋ ค์ง๊ธฐ ์ง์ ์ ์ต์ข ๊ฐ์ฒด ๊ตฌ์กฐ, ์ต์ข ๋ฒ์ ์ด๋ผ๊ณ ๋ณด๋ฉด ๋๋ค. ์ดํ์ ๋ธ๋ผ์ฐ์ ์ ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ๊ธฐ ์ํ ๋ ์ด์์ ๊ณ์ฐ, ํ์ธํ , ํฉ์ฑ ๊ณผ์ ๋ฑ์ ๊ฑฐ์น ํ ํด๋ผ์ด์ธํธ์๊ฒ ์๊ฐ์ ์ผ๋ก ๋ณด์ฌ์ง๊ฒ ๋๋ ๊ฒ์ด๋ค.
โช ํ ๋ฌธ์ฅ์ผ๋ก DOM ์ ์ค๋ช ํ์๋ฉด, โDocument(HTMLํ์ผ)๋ฅผ Javascript๊ฐ ์์๋จน์ ์ ์๋ Object(๊ฐ์ฒด) ํํ๋กModeling ํ ๊ฒ์ ๋งํ๋ค.
โช ++์๋ฐ์คํฌ๋ฆฝํธ๋ ์์์ ๋ง๋ค์ด์ง DOM์ ์ด์ฉํ์ฌ Document ๋ผ๋ ์ ์ญ ๊ฐ์ฒด๋ฅผ ํตํด ๊ฐ ํ๊ทธ๋ค์ ์ ๊ทผํ ์ ์๋ค. (๊ทธ ์ค window๋ผ๋ ๊ฐ์ฒด๋ document ๊ฐ์ฒด์ ์์์ ์์นํ๋ค.)
1.2 Virtual DOM
๐ฌ๊ทธ๋ฐ๋ฐ ์ ๊ฐ์ ๋์ด ๋์ค๊ฒ ๋ ๊ฒ์ผ๊น?
์์์ ํ์ฑ์ดํ์ ๋ ๋๋ง์ด๋ผ๋ ๊ณผ์ ์ด ์๋ค๊ณ ์ธ๊ธํ์๋ค. ์น๋ธ๋ผ์ฐ์ ์์ DOM ๋ณํ๊ฐ ์ผ์ด๋๋ฉด CSS๋ฅผ ๋ค์ ์ฐ์ฐํ๊ณ ๋ ์ด์์์ ๊ตฌ์ฑํ๊ณ , ํ์ด์ง๋ฅผ ๋ฆฌ ํ์ธํธ ์ฆ ๋ ๋๋ง์ด ์ผ์ด๋๋ค. ๊ธฐ์กด์ DOM์ DOM ๋ชจ๋ธ๋ง ์์ฒด๋ ๋น ๋ฅด์ง๋ง ์ด ๋ ๋๋ง์ด๋ผ๋ ๊ณผ์ ์์ ์๊ฐ์ด ํ๋น๊ฐ ๋๋ค๋ ๊ฒ์ด๋ค. ๊ธฐ์กด DOM์ ์๋์ ์ธ ๋ถ๋ถ๊ณผ ๊ธฐํ ๋ฒ๊ทธ๋ค์ด ๋ฐ์ํ์ฌ ๋ธ๋ผ์ฐ์ ๊ฐ ์ฃฝ๋ ์ผ ๋ฑ์ ๋ฐ์์ ๊ฐ์ ํ๊ณ ์ ๊ฐ์ ๋(Virtual DOM)์ด ๋์ค๊ฒ ๋์๋ค.
โช Virtual DOM์ DOM์ โ(ํ์ฌ)์ํ๋ฅผ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํ๊ณ , โ ๋ณ๊ฒฝ ์ ๊ณผ ๋ณ๊ฒฝ ํ์ ์ํ๋ฅผ ๋น๊ตํ ๋ค ์ต์ํ์ ๋ด์ฉ๋ง ๋ฐ์ํ๋ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์๋ค. '๋น๊ต' ๋ผ๋ ๊ณผ์ ์ ํ์ด์ ๋งํ์๋ฉด ์ด์ ์ ๊ฐ์ ๋๊ณผ ํ์ฌ์ ๊ฐ์ ๋์ ๋น๊ตํ์ฌ, ๊ทธ๋ฌ๋๊น ์ด์ ์ดํ ๊ฐ์ ๋๋ผ๋ฆฌ ์ ์ฒด๋ฅผ โ'ํ ๋ฒ๋ง' ๋น๊ต๋ฅผ ํ์ฌ ๋ฐ๋ ๋ถ๋ถ๋ง ์ค์ DOM์ ์ ์ฉ์ ํ๊ฒ ๋๋ค๋ ๊ฒ์ด๋ค. ์ด๋ก์จ ๊ธฐ์กด DOM์ ๋ ๋๋ง๋ณด๋ค ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์๋ค.
๐ฌ ๊ฐ์ ๋์ ๊ตฌ์กฐ?
๊ธฐ์กด DOM๊ณผ ์๋ฒฝํ ๋์ผํ ๋ณต์ฌ๋ณธ ํํ์ด๋ค.

์ค์ DOM์ DOM ์์๋ฅผ ์กฐ์ํ๋ ๊ฒ.
โ๊ฐ์ DOM์ ์ค์ DOM์ ๋ณต์ฌํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด(Object) ํํ๋ก ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํจ.
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ค์ DOM์ ์กฐ์ํ๋ ๊ฒ๋ณด๋ค ํจ์ฌ ๋น ๋ฅด๊ฒ ์กฐ์์ ์ํํ ์ ์๋ค.
(์ค์ DOM์ ์กฐ์ํ๋ ๊ฒ๋ณด๋ค ๋ฉ๋ชจ๋ฆฌ์์ ์ฌ๋ผ์์๋ javascript ๊ฐ์ฒด๋ฅผ ๋ณ๊ฒฝํ๋ ์์ ์ด ํจ์ฌ ๊ฐ๋ณ๋ค!)
๐ฌ ๊ฐ์ DOM์ ๋์ ๊ณผ์
[STEP 1]
์ด ๊ณผ์ ์์ ๋ฆฌ์กํธ๋ ํญ์ 2๊ฐ์ง ๋ฒ์ ์ ๊ฐ์DOM์ ๊ฐ์ง๊ณ ์๋ค.
- ํ๋ฉด์ด ๊ฐฑ์ ๋๊ธฐ ์ ๊ตฌ์กฐ๊ฐ ๋ด๊ฒจ์๋ ๊ฐ์DOM ๊ฐ์ฒด(Tree ํํ์ ๊ฐ์ DOM)
- ํ๋ฉด ๊ฐฑ์ ํ ๋ณด์ฌ์ผ ํ ๊ฐ์ DOM ๊ฐ์ฒด(state ๋ณ๊ฒฝ ํ์ ๊ฐ์ DOM)
๋ฆฌ์กํธ๋ state๊ฐ ๋ณ๊ฒฝ๋ผ์ผ๋ง ๋ฆฌ๋ ๋๋ง์ด ๋๋ค. ๊ทธ ๋, ๋ฐ๋ก 2๋ฒ์ ํด๋น๋๋ ๊ฐ์ DOM์ ๋ง๋๋ ๊ฒ์ด๋ค.
[STEP 2 : diffing ๊ณผ์ = ๋น๊ต ๋จ๊ณ]
state๊ฐ ๋ณ๊ฒฝ๋๋ฉด 2๋ฒ์์ ์์ฑ๋ ๊ฐ์๋๊ณผ 1๋ฒ์์ ์ด๋ฏธ ๊ฐ๊ณ ์์๋ ๊ฐ์๋์ ๋น๊ตํด์ ์ด๋ ๋ถ๋ถ(์๋ฆฌ๋จผํธ)์์ ๋ณํ๊ฐ ์ผ์ด๋ฌ๋์ง๋ฅผ ์๋นํ ๋น ๋ฅด๊ฒ ํ์ ํด๋ธ๋ค. (=> ์๋นํ ๋น ๋ฅด๊ฒ ํ์ ํด๋ด๋ ๊ฒ์ด ๋ฆฌ์กํธ์ ์์ฒด ์๊ณ ๋ฆฌ์ฆ์ด๋ค.)
[STEP 3 : ์ฌ์กฐ์ (reconciliation)]
ํ์ ์ด ๋ค ๋๋๋ฉด, ๋ณ๊ฒฝ์ด ์ผ์ด๋ ๊ทธ ๋ถ๋ถ๋ง ์ค์ DOM์ ์ ์ฉ์์ผ์ค๋ค. ์ ์ฉ์ํฌ ๋๋, ํ๊ฑด ํ๊ฑด ์ ์ฉ์ํค๋ ๊ฒ์ด ์๋๋ผ, ๋ณ๊ฒฝ์ฌํญ์ ๋ชจ๋ ๋ชจ์ ํ ๋ฒ๋ง ์ ์ฉ์ ์ํจ๋ค.(Batch Update ๐ฅ)
๐ฌ React๊ฐ ํํ ์ ๋ฐ์ดํธ ๋ฐฉ์: Batch Update
*batch: ์ง๋จ[๋ฌด๋ฆฌ]
virtual DOM์ ๋ณ๊ฒฝ์ฌํญ์ด ๋ค ๋๋ ๋๊น์ง ๋ธ๋ผ์ฐ์ DOM, ์ฆ, ์ค์ DOM์ ์์ง ๋ฐ์ํ์ง ์๋๋ค.
Diffing ๊ณผ์ ์ด ๋ค ๋๋์ ์ ์ฒด ๋ณ๊ฒฝ์ฌํญ์ด ํ์ ์ด ์๋ฃ๋ ํ์ ๋ฑ ํ ๋ฒ๋ง ์ ๋ฐ์ดํธ ํ๋ค. ์ด๋ฐ ๋ฐฉ์์ด Batch Update์ด๋ค.
DOM์์ ๊ฐ์ฅ ๋น์ผ ์์ ( = ์ค๋ ๊ฑธ๋ฆฌ๋) ์์ ์ painting ์์ ์ด๋ค. painting ์์ ์ ์ค์ ๋ก ํ๋ฉด์ element๋ฅผ ๊ทธ๋ ค์ฃผ๋ ์์ ์ ๋งํ๋ค. ์ด ๊ทธ๋ ค์ฃผ๋ ์์ ์ ๋ฑ ํ ๋ฒ๋ง ๊ฐฑ์ ํ๋ ๊ฒ์ด๋ค. ๊ทธ๋์ ์์ฒญ๋๊ฒ ๋น ๋ฅธ ์๋๋ฅผ ๋ณด์ฌ์ค๋ค.
์๋ฅผ ๋ค์ด ํด๋ฆญ ํ ๋ฒ์ผ๋ก ํ๋ฉด์ ์๋ 5๊ฐ์ ์๋ฆฌ๋จผํธ๊ฐ ๋ฐ๋์ด์ผ ํ๋ค๋ฉด
- ์ค์ DOM : 5๋ฒ์ ํ๋ฉด ๊ฐฑ์ ํ์
- ๊ฐ์ DOM : Batch Update๋ก ์ธํด ๋จ ํ๋ฒ๋ง ๊ฐฑ์ ํ์
์ด๋ฐ ์ฐจ์ด๊ฐ ์๋ค.
Batch Update ๋ฐฉ์์ ๋ฐํ์ผ๋ก ๋ค์๊ณผ ๊ฐ์ ํ์์ ์ดํดํ ์ ์๊ฒ ๋๋ค.
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
์ด๋ ๊ฒ 3๊ฐ๋ฅผ ์ฐ๋ฌ์ ๋ฉ๋ฌ๋ 1๋ง ์ฌ๋ผ๊ฐ count๋ฅผ ๊ทธ๋ ค์ฃผ๋ ์ด์ ๊ฐ ๋ฐ๋ก ์ด๋ฐ ์ด์ ๋๋ฌธ์ด๋ค.
count + 1 ์ด ๋ ๊ฒ์ด ์์ง ์ค์ DOM์ ๋ฐ์์ด ๋์ง ์์๊ธฐ ๋๋ฌธ์ธ ๊ฒ์ด๋ค.
count๋ฅผ ๊ณ์ ๊บผ๋ด์์ state๋ฅผ ๋ฐ๊พธ๋ ค๊ณ ํด๋ดค์ ์ ๋ฐ์ดํธ ์ ์ count๋ ๊บผ๋ด์ฌ ๋๋ง๋ค ๊ณ์ 0์ธ ์ํ๊ฐ ๋๋ ๊ฒ์ด๋ค.
1.3 ๋ฆฌ์กํธ์ props์ state
๐ต props
props๋ ์ ๋ง ๊ฐ๋จํ๊ฒ ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์์ ์ปดํฌ๋ํธ์๊ฒ ๋ฌผ๋ ค์ฃผ๋ ๋ฐ์ดํฐ๋ฅผ ์๋ฏธํ๋ค.
props์ ๋ํด์๋ ๋ฐ๋ก ๊ธ์ ์จ์ ๋งํฌ๋ฅผ ์ฒจ๋ถํ๋ค.
๐ต state
Virtual DOM ์ค๋ช ๋ถ๋ถ์ ์ด์ ๊ฐ์ ๋๊ณผ ์ดํ ๊ฐ์ ๋์ ๋น๊ตํ์ฌ ์ ์ฉํ๋ค๊ณ ์ธ๊ธํ์๋ค. ๋น๊ตํ ๋ ์ฌ์ฉ๋๋ ๊ฐ๋ ์ด ๋ฐ๋ก state์ด๋ค. state๋ ์ํ, ๋ง ๊ทธ๋๋ก ์ด์ ์ํ์ ์ดํ ์ํ๋ฅผ ๋น๊ตํ๊ฒ ๋๋ ๊ฒ์ด๋ค. State์ ๋ํด์ ์ข ๋ ์ ํํ ๋งํ์๋ฉด ์ปดํฌ๋ํธ ๋ด๋ถ์์ ๋ฐ๋ ์ ์๋ ๊ฐ์ ์๋ฏธํ๋ค. ๋ฆฌ์กํธ์์ ์ด state๋ฅผ ๋ง๋ค ๋๋ useState() ๋ผ๊ณ ํ๋ stateHooks๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ค.
๐ฌ useState์ ๊ธฐ๋ณธ ํํ
const [ value, setValue ] = useState( ์ด๊ธฐ๊ฐ )
๊ฐ๋จํ๊ฒ value๋ useState ์์ ๋ค์ด์๋ ์ด๊ธฐ๊ฐ์ ๋ด์ ์๋ณ์์ด๋ค.
setValue๋ value์ ๋ด๊ฒจ์๋ ๊ฐ์ ๋ณ๊ฒฝํ ์ ์๋ ๋ฉ์๋์ด๋ค.
๐ฌ state์ ๋ํด์ ์๊ธฐํ ๋๋ ๋ถ๋ณ์ฑ์ ๋ํด์ ๊ผญ ์์์ผ ํ๋ค.
๋ถ๋ณ์ฑ์ ๋ํด์ ์๊ธฐํ๊ธฐ ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐ์ดํฐ ์ข ๋ฅ์ธ ๊ธฐ๋ณธํ ๋ฐ์ดํฐ์ ์ฐธ์กฐํ ๋ฐ์ดํฐ์ ๋ํด์ ์๊ณ ์์ด์ผ ํ๋ค.
โ ์์[๊ธฐ๋ณธํ] ๋ฐ์ดํฐ : Boolean, number, string, ๋ฑ
โ ์ฐธ์กฐํ ๋ฐ์ดํฐ: ๋ฐฐ์ด, ๊ฐ์ฒด, ํจ์
โช ๊ธฐ๋ณธํ ๋ฐ์ดํฐ๋ ๋ณ์ ์์ญ์ ๋ณํ๋ ํน์ง(=๋ณ์)๊ณผ ๋ฐ์ดํฐ ์์ญ์ ๋ณํ์ง ์๊ณ ์๋ก ์์ฑํ๋ ๋ถ๋ณ์ฑ์ ๊ฐ์ง๊ณ ์๋ค.
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์์ useState ๊ธฐ๋ณธ ํํ์์ setValue๋ฅผ ํตํด ์ด์ ์ ์ด๊ธฐ๊ฐ์ด ๋ด๊ธด ์๋ณ์ value์ ๊ฐ์ ๋ฐ๊พผ๋ค๋ฉด ์๋ก ์์ฑ๋ ๋ฐ์ดํฐ ์์ญ์ ์ฐธ์กฐํ๊ฒ ๋์ด ๋ณ์์์ญ์ด ์ฐธ์กฐํ๊ณ ์๋ ์ฃผ์๊ฐ ๋ณํ๋๊ณ ์ด ๋ณํ๋ฅผ ๊ฐ์งํ๊ธฐ ๋๋ฌธ์ ๋ ๋๋ง์ ๋ฐ์์ํจ๋ค.
โช ์ฐธ์กฐํ ๋ฐ์ดํฐ๋ ๊ธฐ๋ณธํ ๋ฐ์ดํฐ์๋ ๋ค๋ฅด๋ค. ๊ทธ๋ฆผ์ ๋ณด๊ณ ์ดํดํ๋๋ก ํ์.
// ์ฐธ์กฐํ ๋ฐ์ดํฐ๋ ๋ณ๋ ์ ์ฅ๊ณต๊ฐ(obj1์ ์ํ ๋ณ๋ ๊ณต๊ฐ)์ด ํ์ํฉ๋๋ค!
var obj1 = {
a: 1,
b: 'bbb,
};

โช ์ฐธ์กฐํ ๋ฐ์ดํฐ๋ ๋ณ์์์ญ(obj1/@7103~) ์ ๋ณํ์ง ์๊ณ (=์์) ๋ฐ์ดํฐ ์์ญ(Obj ๋ณ๋)์ด ๋ณํ๋ ๊ฐ๋ณ์ฑ์ ๊ฐ์ง๊ณ ์๋ค. ๋ง์ฝ obj1.a ์ ์๋ก์ด ๊ฐ์ ํ ๋นํ์ ๋ ์ฌ๊ธฐ์ ๋ณํ๋ ๋ถ๋ถ์ obj๋ณ๋์ 7103์ ๋ด๊ธด a/@5001 ์ด ๋ถ๋ถ์ด๋ค.
๋ณ์ ์์ญ(obj1/@7103~)์ ๋ณํ์ง ์๋๋ค. (์ดํด๊ฐ ์๋๋ค๋ฉด ํ๋กํผํฐ๊ฐ ์ฐธ์กฐํ๊ณ ์๋ ์ฃผ์๊ฐ ๋ณํ๋ค๊ณ ์๊ฐํ์.)
โช ์ด๋ ๊ฒ ์ฐธ์กฐํ ๋ฐ์ดํฐ๋ ๊ธฐ๋ณธํ ๋ฐ์ดํฐ์ฒ๋ผ ์๋ก ๊ฐ์ ํ ๋นํด๋ ๊ฒฐ๊ตญ ๋ณ์ ์์ญ ๋ฉ๋ชจ๋ฆฌ ์ฃผ์๋ ๊ทธ๋๋ก ์ด๊ธฐ ๋๋ฌธ์ ๋ฆฌ์กํธ์์ state๊ฐ ๋ณํ๋ค๊ณ ํ๋จํ์ง ์๋๋ค. ๊ทธ๋์ ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ํ์ง ์๋๋ค. ์๋ฌด๋ฆฌ ๊ฐ์ ์ฌํ ๋นํด๋ ๋ณ์์์ญ๋ฉ๋ชจ๋ฆฌ๋ ๊ทธ๋๋ก์ด๊ณ Obj ๋ณ๋๋ถ๋ถ๋ง ๋ฐ๋๋ ๊ฐ๋ณ์ฑ์ ๊ฐ์ง๊ณ ์๋ ๊ฒ์ด๋ค.
โช ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ โ์ฐธ์กฐํ ๋ฐ์ดํฐ๊ฐ ๋ถ๋ณ์ฑ์ ์งํจ๋ค๋ ๊ฒ์ ์์ ์๋ก์ด ๋ฐฐ์ด์ด๋ ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด์ ๊ทธ ์๋ก์ด ๊ฐ์ฒด๋ ๋ฐฐ์ด๋ก ์ด์ state๋ฅผ ๊ฐ์ ๋ผ์ฐ๋ ๊ฒ์ ์๋ฏธํ๋ค. ์ด๋ ๊ฒ ๋๋ฉด ๋ณ์์์ญ ๋ฉ๋ชจ๋ฆฌ ์ฃผ์๋ ๊ฐ์๋ผ์์ง๊ธฐ ๋๋ฌธ์ ๋น๋ก์ ๋ฆฌ์ํธ์์ ์์ ์๋ก์ด state๋ก ์ธ์ํ์ฌ ๋ฆฌ๋ ๋๋ง์ ํด์ค๋ค.