React๊ฐ ๊ธฐ์กด ๊ฐ์ DOM๊ณผ ๋ณ๊ฒฝ๋ ์๋ก์ด ๊ฐ์ DOM์ ๋น๊ตํ ๋, React ์ ์ฅ์์๋ ๋ณ๊ฒฝ๋ ์๋ก์ด ๊ฐ์ DOM ํธ๋ฆฌ์ ๋ถํฉํ๋๋ก ๊ธฐ์กด์ UI๋ฅผ ํจ์จ์ ์ผ๋ก ๊ฐฑ์ ํ๋ ๋ฐฉ๋ฒ์ ์์๋ผ ํ์๊ฐ ์์๋ค. ์ฆ ํ๋์ ํธ๋ฆฌ๋ฅผ ๋ค๋ฅธ ํธ๋ฆฌ๋ก ๋ณํ์ ์ํค๋ ๊ฐ์ฅ ์์ ์กฐ์ ๋ฐฉ์์ ์์๋ด์ผ๋ง ํ๋๋ฐ, ์์๋ธ ์กฐ์ ๋ฐฉ์ ์๊ณ ๋ฆฌ์ฆ์ O(n^3)์ ๋ณต์ก๋๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
๋ง์ฝ ์ด ์๊ณ ๋ฆฌ์ฆ์ ๊ทธ๋๋ก React์ ์ ์ฉํ๋ค๋ฉด 1000๊ฐ์ ์๋ฆฌ๋จผํธ๋ฅผ ์ค์ ํ๋ฉด์ ํ์ํ๊ธฐ ์ํด 10์ต(1000^3)๋ฒ์ ๋น๊ต ์ฐ์ฐ์ ํด์ผ๋ง ํ๋ค. ์ฌ์ค ์ด๊ฒ์ ๋๋ฌด ๋น์ผ ์ฐ์ฐ์ด๊ธฐ ๋๋ฌธ์ React๋ ๋ ๊ฐ์ง์ ๊ฐ์ ์ ๊ฐ์ง๊ณ ์๊ฐ ๋ณต์ก๋ O(n)์ ์๋ก์ด ํด๋ฆฌ์คํฑ ์๊ณ ๋ฆฌ์ฆ(Heuristic Algorithm)์ ๊ตฌํํด๋ธ๋ค.
๋ ๊ฐ์ง ๊ฐ์
key
ํ๋กํผํฐ๋ฅผ ๊ฐ์ง๊ณ , ์ฌ๋ฌ ๋ฒ ๋ ๋๋ง์ ๊ฑฐ์ณ๋ ๋ณ๊ฒฝ๋์ง ๋ง์์ผ ํ๋ ์์ ์์๊ฐ ๋ฌด์์ธ์ง ์์๋ผ ์ ์์ ๊ฒ์ค์ ์ด ๋ ๊ฐ์ ์ ๊ฑฐ์ ๋ชจ๋ ์ค์ ์ฌ์ฉ ์ฌ๋ก์ ๋ค์ด๋ง๊ฒ ๋๋ค. ์ฌ๊ธฐ์ React๋ ๋น๊ต ์๊ณ ๋ฆฌ์ฆ(Diffing Algorithm)์ ์ฌ์ฉํ๋ค.
React๋ ๊ธฐ์กด์ ๊ฐ์ DOM ํธ๋ฆฌ์ ์๋กญ๊ฒ ๋ณ๊ฒฝ๋ ๊ฐ์ DOM ํธ๋ฆฌ๋ฅผ ๋น๊ตํ ๋, ํธ๋ฆฌ์ ๋ ๋ฒจ ์์๋๋ก ์ํํ๋ ๋ฐฉ์์ผ๋ก ํ์ํ๋ค. ์ฆ ๊ฐ์ ๋ ๋ฒจ(์์น)๋ผ๋ฆฌ ๋น๊ตํ๋ค๋ ๋ป์ด๋ค. ์ด๋ ๋๋น ์ฐ์ ํ์(BFS)์ ์ผ์ข ์ด๋ผ๊ณ ๋ณผ ์ ์๋ค.
[๊ทธ๋ฆผ] React์ DOM ํธ๋ฆฌ ์ํ ๋ฐฉ์
React๋ ์ด๋ฐ ์์ผ๋ก ๋์ผ ์ ์์ ์๋ ๋ ธ๋๋ฅผ ํ์ ํ ๋ค ๋ค์ ์์ ์ธ๋์ ๋ ธ๋๋ฅผ ์์ฐจ์ ์ผ๋ก ํ์ ํด ๋๊ฐ๋ค.
๊ทธ๋ฐ๋ฐ DOM ํธ๋ฆฌ๋ ๊ฐ HTML ํ๊ทธ๋ง๋ค ๊ฐ๊ฐ์ ๊ท์น์ด ์์ด ๊ทธ ์๋ ๋ค์ด๊ฐ๋ ์์ ํ๊ทธ๊ฐ ํ์ ์ ์ด๋ผ๋ ํน์ง์ด ์๋ค. (์๋ฅผ ๋ค์ด <ul>
ํ๊ทธ ๋ฐ์๋ <li>
ํ๊ทธ๋ง ์์ผ ํ๋ค๋๊ฐ, <p>
ํ๊ทธ ์์ <p>
ํ๊ทธ๋ฅผ ๋ ์ฐ์ง ๋ชปํ๋ ๊ฒ์
๋๋ค.) ์์ ํ๊ทธ์ ๋ถ๋ชจ ํ๊ทธ ๋ํ ์ ํด์ ธ ์๋ค๋ ํน์ง์ด ์๊ธฐ ๋๋ฌธ์, ๋ถ๋ชจ ํ๊ทธ๊ฐ ๋ฌ๋ผ์ง๋ค๋ฉด React๋ ์ด์ ํธ๋ฆฌ๋ฅผ ๋ฒ๋ฆฌ๊ณ ์๋ก์ด ํธ๋ฆฌ๋ฅผ ๊ตฌ์ถํด๋ฒ๋ฆฐ๋ค.
<div>
<Counter />
</div>
//๋ถ๋ชจ ํ๊ทธ๊ฐ div์์ span์ผ๋ก ๋ฐ๋๋ค.
<span>
<Counter />
</span>
์ด๋ ๊ฒ ๋ถ๋ชจ ํ๊ทธ๊ฐ ๋ฐ๋์ด๋ฒ๋ฆฌ๋ฉด, React๋ ๊ธฐ์กด์ ํธ๋ฆฌ๋ฅผ ๋ฒ๋ฆฌ๊ณ ์๋ก์ด ํธ๋ฆฌ๋ฅผ ๊ตฌ์ถํ๊ธฐ ๋๋ฌธ์ ์ด์ ์ DOM ๋
ธ๋๋ค์ ์ ๋ถ ํ๊ดด๋๋ค. ๋ถ๋ชจ ๋
ธ๋์๋ <div>
๊ฐ <span>
์ผ๋ก ๋ฐ๋์ด๋ฒ๋ฆฌ๋ฉด ์์ ๋
ธ๋์ธ <Counter />
๋ ์์ ํ ํด์ ๋๋ค. ์ฆ ์ด์ <div>
ํ๊ทธ ์ <Counter />
๋ ํ๊ดด๋๊ณ <span>
ํ๊ทธ ์ ์๋ก์ด <Counter />
๊ฐ ๋ค์ ์คํ๋ฉ๋๋ค. ์๋ก์ด ์ปดํฌ๋ํธ๊ฐ ์คํ๋๋ฉด์ ๊ธฐ์กด์ ์ปดํฌ๋ํธ๋ ์์ ํ ํด์ (Unmount)๋์ด๋ฒ๋ฆฌ๊ธฐ ๋๋ฌธ์ <Counter />
๊ฐ ๊ฐ๊ณ ์๋ ๊ธฐ์กด์ state ๋ํ ํ๊ดด๋๋ค.
๋ฐ๋๋ก ํ์ ์ด ๋ฐ๋์ง ์๋๋ค๋ฉด React๋ ์ต๋ํ ๋ ๋๋ง์ ํ์ง ์๋ ๋ฐฉํฅ์ผ๋ก ์ต์ํ์ ๋ณ๊ฒฝ ์ฌํญ๋ง ์ ๋ฐ์ดํธํ๋ค. ์ด๊ฒ์ด ๊ฐ๋ฅํ ์ด์ ๋ ์์ React๊ฐ ์ค์ DOM์ด ์๋ ๊ฐ์ DOM์ ์ฌ์ฉํด ์กฐ์ํ๊ธฐ ๋๋ฌธ์ด๋ค. ์ ๋ฐ์ดํธ ํ ๋ด์ฉ์ด ์๊ธฐ๋ฉด virtual DOM ๋ด๋ถ์ ํ๋กํผํฐ๋ง ์์ ํ ๋ค, ๋ชจ๋ ๋ ธ๋์ ๊ฑธ์น ์ ๋ฐ์ดํธ๊ฐ ๋๋๋ฉด ๊ทธ๋ ๋จ ํ๋ฒ ์ค์ DOM์ผ๋ก์ ๋ ๋๋ง์ ์๋ํ๋ค.
<div className="before" title="stuff" />
//๊ธฐ์กด์ ์๋ฆฌ๋จผํธ๊ฐ ํ๊ทธ๋ ๋ฐ๋์ง ์์ ์ฑ className๋ง ๋ฐ๋์๋ค.
<div className="after" title="stuff" />
React๋ ๋ ์์๋ฅผ ๋น๊ตํ์ ๋ className๋ง ์์ ๋๊ณ ์๋ค๋ ๊ฒ์ ์๊ฒ ๋๋ค. className before์ after๋ ๊ฐ์ ์ด๋ฐ ์คํ์ผ์ ๊ฐ๊ณ ์๋ค๊ณ ํด๋ณด์.
//className์ด before์ธ ์ปดํฌ๋ํธ
<div style={{color: 'red', fontWeight: 'bold"}} title="stuff" />
//className์ด after์ธ ์ปดํฌ๋ํธ
<div style={{color: 'green', fontWeight: 'bold"}} title="stuff" />
๋ ์๋ฆฌ๋จผํธ๋ฅผ ๋น๊ตํ์ ๋ React๋ ์ ํํ color ์คํ์ผ๋ง ๋ฐ๋๊ณ ์์์ ๋์น์ฑ๋ค. ๋ฐ๋ผ์ React๋ color ์คํ์ผ๋ง ์์ ํ๊ณ fontWeight ๋ฐ ๋ค๋ฅธ ์์๋ ์์ ํ์ง ์๋๋ค. ์ด๋ ๊ฒ ํ๋์ DOM ๋ ธ๋๋ฅผ ์ฒ๋ฆฌํ ๋ค React๋ ๋ค์ด์ด์ ํด๋น ๋ ธ๋๋ค ๋ฐ์ ์์๋ค์ ์์ฐจ์ ์ผ๋ก ๋์์ ์ํํ๋ฉด์ ์ฐจ์ด๊ฐ ๋ฐ๊ฒฌ๋ ๋๋ง๋ค ๋ณ๊ฒฝํ๋ค. ์ด๋ฅผ ์ฌ๊ท์ ์ผ๋ก ์ฒ๋ฆฌํ๋ค๊ณ ํํํ๋ค.
์๋ฅผ ๋ค๋ฉด ์ด๋ ๊ฒ ์์ ์๋ฆฌ๋จผํธ๊ฐ ๋ณ๊ฒฝ์ด ๋๋ค๊ณ ๊ฐ์ ํด ๋ณด์.
<ul>
<li>first</li>
<li>second</li>
</ul>
//์์ ์๋ฆฌ๋จผํธ์ ๋์ ์๋ก์ด ์์ ์๋ฆฌ๋จผํธ๋ฅผ ์ถ๊ฐํ๋ค.
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
React๋ ๊ธฐ์กด <ul>
๊ณผ ์๋ก์ด <ul>
์ ๋น๊ตํ ๋ ์์ ๋
ธ๋๋ฅผ ์์ฐจ์ ์ผ๋ก ์์์๋ถํฐ ์๋๋ก ๋น๊ตํ๋ฉด์ ๋ฐ๋ ์ ์ ์ฐพ๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์์๋๋ก React๋ ์ฒซ ๋ฒ์งธ ์์ ๋
ธ๋๋ค๊ณผ ๋ ๋ฒ์งธ ์์ ๋
ธ๋๋ค์ด ์ผ์นํ๋ ๊ฑธ ํ์ธํ ๋ค ์ธ ๋ฒ์งธ ์์ ๋
ธ๋๋ฅผ ์ถ๊ฐํ๋ค.
์ด๋ ๊ฒ React๋ ์์์ ์๋๋ก ์์ฐจ์ ์ผ๋ก ๋น๊ตํ๊ธฐ ๋๋ฌธ์, ์ด ๋์ ๋ฐฉ์์ ๋ํด ๊ณ ๋ฏผํ์ง ์๊ณ ๋ฆฌ์คํธ์ ์ฒ์์ ์๋ฆฌ๋จผํธ๋ฅผ ์ฝ์ ํ๊ฒ ๋๋ฉด ์ด์ ์ ์ฝ๋์ ๋นํด ํจ์ฌ ๋์ ์ฑ๋ฅ์ ๋ด๊ฒ ๋๋ค.
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul>
//์์ ์๋ฆฌ๋จผํธ๋ฅผ ์ฒ์์ ์ถ๊ฐํ๋ค.
<ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>
์ด๋ ๊ฒ ๊ตฌํํ๊ฒ ๋๋ฉด React๋ ์ฐ๋ฆฌ์ ๊ธฐ๋๋๋ก ์ต์ํ์ผ๋ก ๋์ํ์ง ๋ชปํ๊ฒ ๋๋ค. React๋ ์๋์ ๋์ํ๋ ๋ฐฉ์๋๋ก ์ฒ์์ ๋ ธ๋๋ค์ ๋น๊ตํ๊ฒ ๋๋ค.
์ฒ์์ ์์ ๋
ธ๋๋ฅผ ๋น๊ตํ ๋, <li>Duke</li>
์ <li>Connecticut</li>
๋ก ์์ ๋
ธ๋๊ฐ ์๋ก ๋ค๋ฅด๋ค๊ณ ์ธ์งํ๊ฒ ๋ React๋ ๋ฆฌ์คํธ ์ ์ฒด๊ฐ ๋ฐ๋์๋ค๊ณ ๋ฐ์๋ค์ธ๋ค. ์ฆ <li>Duke</li>
์ <li>Villanova</li>
๋ ๊ทธ๋๋ก๊ธฐ ๋๋ฌธ์ ๋ ์์ ๋
ธ๋๋ ์ ์ง์์ผ๋ ๋๋ค๋ ๊ฒ์ ๊นจ๋ซ์ง ๋ชปํ๊ณ ์ ๋ถ ๋ฒ๋ฆฌ๊ณ ์๋กญ๊ฒ ๋ ๋๋ง ํด๋ฒ๋ฆฐ๋ค. ์ด๋ ๊ต์ฅํ ๋นํจ์จ์ ์ธ ๋์ ๋ฐฉ์์ด๋ค.
๊ทธ๋์ React๋ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด key๋ผ๋ ์์ฑ์ ์ง์ํ๋ค. ์ด๋ ํจ์จ์ ์ผ๋ก ๊ฐ์ DOM์ ์กฐ์ํ ์ ์๋๋ก ํ๋ค. ๋ง์ผ ๊ฐ๋ฐํ ๋น์ key๋ผ๋ ์์ฑ์ ์ฌ์ฉํ์ง ์์ผ๋ฉด React ์์ key๊ฐ์ ๋ฌ๋ผ๊ณ ๊ฒฝ๊ณ ๋ฌธ์ ๋์ฐ๋ ๊ฒ๋ ์ด ๋๋ฌธ์ธ ๊ฒ์ด๋ค. key๊ฐ์ด ์๋ ๋ ธ๋๋ ๋นํจ์จ์ ์ผ๋ก ๋์ํ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค.
๋ง์ฝ ์์ ๋ ธ๋๋ค์ด ์ด key๋ฅผ ๊ฐ๊ณ ์๋ค๋ฉด, React๋ ๊ทธ key๋ฅผ ์ด์ฉํด ๊ธฐ์กด ํธ๋ฆฌ์ ์์๊ณผ ์๋ก์ด ํธ๋ฆฌ์ ์์์ด ์ผ์นํ๋์ง ์๋์ง ํ์ธํ ์ ์๋ค.
<ul>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
//key๊ฐ 2014์ธ ์์ ์๋ฆฌ๋จผํธ๋ฅผ ์ฒ์์ ์ถ๊ฐ
<ul>
<li key="2014">Connecticut</li>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
React๋ key ์์ฑ์ ํตํด โ2014โ๋ผ๋ ์์ ์๋ฆฌ๋จผํธ๊ฐ ์๋กญ๊ฒ ์๊ฒผ๊ณ , โ2015โ, โ2016โ ํค๋ฅผ ๊ฐ์ง ์๋ฆฌ๋จผํธ๋ ๊ทธ์ ์์น๋ง ์ด๋ํ๋ค๋ ๊ฑธ ์๊ฒ ๋๋ค. ๋ฐ๋ผ์ React๋ ๊ธฐ์กด์ ๋์ ๋ฐฉ์๋๋ก ๋ค๋ฅธ ์์ ์๋ฆฌ๋จผํธ๋ ๋ณ๊ฒฝํ์ง ์๊ณ ์ถ๊ฐ๋ ์๋ฆฌ๋จผํธ๋ง ๋ณ๊ฒฝํ๋ค. ์ด key ์์ฑ์๋ ๋ณดํต ๋ฐ์ดํฐ ๋ฒ ์ด์ค ์์ ์ ๋ํฌํ ๊ฐ(ex. Id)์ ๋ถ์ฌํด์ฃผ๋ฉด ๋๋ค. ํค๋ ์ ์ญ์ ์ผ๋ก ์ ์ผํ ํ์๋ ์๊ณ , ํ์ ์๋ฆฌ๋จผํธ ์ฌ์ด์์๋ง ์ ์ผํ๋ฉด ๋๋ค.
๋ง์ฝ ์ด๋ฐ ์ ๋ํฌํ ๊ฐ์ด ์๋ค๋ฉด ์ตํ์ ์๋จ์ผ๋ก ๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ฅผ key๋ก ์ฌ์ฉํ ์ ์๋ค. ๋ค๋ง ๋ฐฐ์ด์ด ๋ค๋ฅด๊ฒ ์ ๋ ฌ๋ ๊ฒฝ์ฐ๊ฐ ์๊ธด๋ค๋ฉด ๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ฅผ key๋ก ์ ํํ์ ๊ฒฝ์ฐ๋ ๋นํจ์จ์ ์ผ๋ก ๋์ํ ๊ฒ์ด๋ค. ์๋ํ๋ฉด ๋ฐฐ์ด์ด ๋ค๋ฅด๊ฒ ์ ๋ ฌ๋์ด๋ ์ธ๋ฑ์ค๋ ๊ทธ๋๋ก ์ ์ง๋๊ธฐ ๋๋ฌธ์ด๋ค. ์ธ๋ฑ์ค๋ ๊ทธ๋๋ก์ง๋ง ๊ทธ ์์๊ฐ ๋ฐ๋์ด๋ฒ๋ฆฐ๋ค๋ฉด React๋ ๋ฐฐ์ด์ ์ ์ฒด๊ฐ ๋ฐ๋์๋ค๊ณ ๋ฐ์๋ค์ผ ๊ฒ์ด๊ณ , ๊ธฐ์กด์ DOM ํธ๋ฆฌ๋ฅผ ๋ฒ๋ฆฌ๊ณ ์๋ก์ด DOM ํธ๋ฆฌ๋ฅผ ๊ตฌ์ถํด๋ฒ๋ฆฌ๊ธฐ ๋๋ฌธ์ ๋นํจ์จ์ ์ผ๋ก ๋์ํ๋ ๊ฒ์ด๋ค.