React์ ๋ํด ์ข ๋ ์ฌํ์ ์ธ ๋ถ๋ถ์ ํ์ตํ๋ค.
React๋ UI์ ์ํ๋ฅผ ์ถ์ ํ๊ณ ๋ณํ๊ฐ ์ผ์ด๋ ์์๋ค์ ๋น ๋ฅด๊ฒ ์ ๋ฐ์ดํธํ ์ ์๋๋ก ๊ฐ์ DOM์ด๋ผ๋ ๊ฐ์์ DOM ๊ฐ์ฒด๋ฅผ ํ์ฉํ๋ค.
๊ฐ์ DOM์ด ์๊ธฐ๊ฒ ๋ ์ด์ ๋ ์ด์ DOM์ผ๋ก ๋ถํฐ ๊ฑฐ์ฌ๋ฌ ์ฌ๋ผ๊ฐ์ผํ๋ค.
๊ทธ๋ฌ๋ DOM์ด ๋ณ๊ฒฝ๋๊ณ ์ ๋ฐ์ดํธ๊ฐ ๋๋ค๋ ๊ฒ์ ๊ฒฐ๊ตญ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ์์ง ๋ํ ๋ฆฌํ๋ก์ฐ(Reflow)ํ๋ค๋ ๋ป์ด๋ค.
๋ฆฌํ๋ก์ฐ?
- ๋ธ๋ผ์ฐ์ ๊ฐ ์์์ ๋ ์ด์์์ ๋ค์ ๊ณ์ฐํ๊ณ ํ๋ฉด์ ๋ฐ์ํ๋ ๊ณผ์
- ๋ฆฌํ๋ก์ฐ๋ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์ ์๋ ๋น์ฉ์ด ํฐ ์์ ์ด๋ค.
JavaScript ๊ฐ์ฒด๋ก ์ด๋ฃจ์ด์ง ๊ฐ์์ DOM ํธ๋ฆฌ๋ฅผ ์ฌ์ฉํด, ์ค์ DOM ์กฐ์์ ์ต์ํํ๊ณ ์ฑ๋ฅ์ ์ต์ ํํ๋ ๊ธฐ์ ์ด๋ค.
๊ฐ์ DOM์ ์ค์ DOM๊ณผ ๋๊ธฐํ๋์ด, ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋ ๋ง๋ค ๊ฐ์ DOM์ ์๋ก ์์ฑํด ์ด์ ์ํ์ ๋น๊ตํ๋ค. ๋น๊ต ํ ๋ณ๊ฒฝ์ด ํ์ํ ๋ถ๋ถ๋ง ์ค์ DOM์ ๋ฐ์ํด ์ ๋ฐ์ดํธํ๊ธฐ์ ๊ธฐ์กด ์์ญ์ ๋ค์ ๋ง๋ค ํ์๊ฐ ์๋ค.
๊ฐ์ DOM์ ์ถ์ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด์ ํํ๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
diffing ์๊ณ ๋ฆฌ์ฆ์ ํตํด ์ด์ ์ํ์ ํ์ฌ ์ํ์ ๊ฐ์ DOM์ ๋น๊ตํ๋ค.
Virtual DOM์ ๋น ๋ฅด๋ค?
๊ฐ์ DOM์ ์ค์ DOM์ ์ง์ ์กฐ์ํ๋ ๊ฒ๋ณด๋ค ๋น ๋ฅด๋ค๋ ๊ฒ์ด ๋ง์ง๋ง, ๋ชจ๋ ๊ฒฝ์ฐ์ ๊ทธ๋ ์ง๋ ์๋ค.
๋๋ก๋ ์ง์ DOM์ ์กฐ์ํ๋ ๊ฒ์ด ๋ ๋น ๋ฅผ ์ ์๋ค.
์ค์ DOM ์กฐ์์ด ๋๋ ค์ง๋ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ๋ DOM ์กฐ์์ด ๋ฐ์ํ ๋๋ง๋ค ๋ธ๋ผ์ฐ์ ์์ ๋ค์ ๋ ์ด์์์ ๊ณ์ฐํ๊ณ , ํ์ด์ง๋ฅผ ๋ค์ ๊ทธ๋ฆฌ๊ธฐ ๋๋ฌธ์ด๋ค.์ข์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋๊ธฐ ์ํด์ ์์ฑํ๋ ์ฝ๋๊ฐ ๋ ๋๋ง์ ์ด๋ค ์ํฅ์ ๋ฏธ์น ์ง๋ฅผ ๊ณ ๋ คํ์ฌ ์ต์ ํ ์์ ์๋ ๊ด์ฌ์ ๊ธฐ์ธ์ฌ์ผ ํ๋ค๊ณ ํ๋ค.
ํด๋ฆฌ์คํฑ ์๊ณ ๋ฆฌ์ฆ(Heuristic Algorithm)?
- ๊ฐ์ DOM ์ ๋ฐ์ดํธ ๊ณผ์ ์์ ์ฌ์ฉ๋๋ ๋น๊ต ์๊ณ ๋ฆฌ์ฆ
- ํจ์จ์ ์ธ ๊ฐ์ ๋์ ์ ๋ฐ์ดํธํ๊ธฐ ์ํด ์ฌ์ฉํ๋ค.
key
ํ๋กํผํฐ๋ฅผ ๊ฐ์ง๊ณ , ์ฌ๋ฌ ๋ฒ ๋ ๋๋ง์ ๊ฑฐ์ณ๋ ๋ณ๊ฒฝ๋์ง ๋ง์์ผ ํ๋ ์์ ์์๊ฐ ๋ฌด์์ธ์ง ์์๋ผ ์ ์์ ๊ฒ์ด๋ค.React๋ ๋น๊ต ์๊ณ ๋ฆฌ์ฆ(Diffing Algorithm)์ ์ฌ์ฉํ๋ค.
React๋ ๊ธฐ์กด์ ๊ฐ์ DOM ํธ๋ฆฌ์ ์๋กญ๊ฒ ๋ณ๊ฒฝ๋ ๊ฐ์ DOM ํธ๋ฆฌ๋ฅผ ๋น๊ตํ ๋
ํธ๋ฆฌ์ ๋ ๋ฒจ ์์๋๋ก ์ํํ๋ ๋ฐฉ์์ผ๋ก ํ์ํ๋ค. (๊ฐ์ ๋ ๋ฒจ(์์น)๋ผ๋ฆฌ ๋น๊ตํ๋ค - ๋๋น ์ฐ์ ํ์(BFS)์ ์ด์ข
์ด๋ผ ๋ณผ ์ ์๋ค.)
<div>
<Counter />
</div>
//๋ถ๋ชจ ํ๊ทธ๊ฐ div์์ span์ผ๋ก ๋ณ๊ฒฝ
<span>
<Counter />
</span>
<Counter />
๊ฐ ๊ฐ๊ณ ์๋ ๊ธฐ์กด์ state๋ ๊ฐ์ด ์์ด์ ธ ๋ฒ๋ฆฐ๋ค.<div className="before" />
//className๋ง ๋ณ๊ฒฝ๋์๋ค.
<div className="after" />
๋ ์๋ฆฌ๋จผํธ๋ฅผ ๋น๊ตํ์ ๋ React๋ ์ ํ์ className์ด ๋ณ๊ฒฝ ๋์์์ ๋์น ์ฑ๋ค.
๋๋จธ์ง๋ ์์ ํ์ง ์๊ณ className๋ง ์์ ํ๋ค.
ํ๋์ DOM ๋ ธ๋๋ฅผ ์ฒ๋ฆฌํ ๋ค React๋ ๋ค์ด์ด ํด๋น ๋ ธ๋๋ค ๋ฐ์ ์์๋ค์ ์์ฐจ์ ์ผ๋ก ๋์์ ์ํํ๋ฉด์ ์ฐจ์ด๊ฐ ๋ฐ๊ฒฌ๋ ๋ ๋ง๋ค ๋ณ๊ฒฝํ๋ค. ์ด๋ฅผ ์ฌ๊ท์ ์ผ๋ก ์ฒ๋ฆฌํ๋ค๊ณ ํํํ๋ค.
<ul>
<li>1</li>
<li>2</li>
</ul>
//์์ ์๋ฆฌ๋จผํธ๋ฅผ ์ฒ์์ ์ถ๊ฐํ ๊ฒฝ์ฐ
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
์ด๋ ๊ฒ ๋ณ๊ฒฝ์ฌํญ์ ์ฒ์์ ๋ฐฐ์นํ ๊ฒฝ์ฐ React๋ ์ฒ์์ ๋ ธ๋ ๋ถํฐ ๋น๊ตํ๊ธฐ ๋๋ฌธ์ ์ฒ์์ ์์ ๋ ธ๋๋ฅผ ๋น๊ตํ ๋ ์์ ๋ ธ๋๊ฐ ์๋ก ๋ค๋ฅด๋ค๊ณ ์ธ์งํ๊ฒ ๋์ด ๋ฆฌ์คํธ ์ ์ฒด๊ฐ ๋ฐ๋์๋ค๊ณ ํ๋จํ๋ค. ๋๋จธ์ง๋ ๊ทธ๋๋ก ์ด์ง๋ง ๊ทธ ๋ถ๋ถ์ ์ธ์งํ์ง ๋ชปํ๊ณ ์ ๋ถ ์๋กญ๊ฒ ๋ ๋๋งํด๋ฒ๋ฆฌ๋ ๋นํจ์จ์ ์ธ ๋์์ ํ๋ค.
์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด key
๋ผ๋ ์์ฑ์ ์ง์ํ๋ค.
๊ฐ๋ฐ ํ ๋ key๋ผ๋ ์์ฑ์ ์ถ๊ฐํ์ง ์์ ์ค๋ฅ๊ฐ ๋ฐ ๋๊ฐ ์์ ๊ฑฐ๋ค. ๊ทธ ์ค๋ฅ ์ด๋๋ฌธ์ด๋ค.
๋ง์ฝ ์์ ๋
ธ๋๋ค์ด key
๋ฅผ ๊ฐ๊ณ ์๋ค๋ฉด React๋ ํด๋น key
๋ฅผ ์ด์ํด ๊ธฐ์กด ํธ๋ฆฌ์ ์์๊ณผ ์๋ก์ด ํธ๋ฆฌ์ ์์์ด ์ผ์นํ๋์ง ์๋์ง ํ์ธํ ์ ์๋ค.
map()
๋ฉ์๋๋ฅผ ํ ๋ key
๊ฐ์ด ํ์ํ ์ด์ ๋ ์ฌ๊ธฐ์ ์๋ ๊ฒ ๊ฐ๋ค.
<ul>
<li key="1">1</li>
<li key="2">2</li>
</ul>
//key๊ฐ 0์ธ ์์ ์๋ฆฌ๋จผํธ๋ฅผ ์ฒ์์ ์ถ๊ฐํ ๊ฒฝ์ฐ
<ul>
<li key="0">0</li>
<li key="1">1</li>
<li key="2">2</li>
</ul>
React๋ key
์์ฑ์ ํตํด 0
์ด๋ผ๋ ์์ ์๋ฆฌ๋จผํธ๊ฐ ์๋กญ๊ฒ ์๊ฒผ๊ณ ๋๋จธ์ง key
๋ฅผ ๊ฐ์ง ์๋ฆฌ๋จผํธ๋ ๊ทธ์ ์์น๋ฉด ๋ณ๊ฒฝ๋์๋ค๋๊ฑธ ์๊ฒ ๋์ด ๋ค๋ฅธ ์์ ์๋ฆฌ๋จผํธ๋ ๋ณ๊ฒฝํ์ง ์๊ณ ์ถ๊ฐ๋ ์๋ฆฌ๋จผํธ๋ง ๋ณ๊ฒฝํ๋ค.
key
์์ฑ์๋ ๋ณดํต ๋ฐ์ดํฐ ๋ฒ ์ด์ค ์์ ์ ๋ํฌํ ๊ฐ(ex - id
)์ ๋ถ์ฌํด ์ค๋ค.
๊ทธ ๊ฐ์ ์ ์ญ์ ์ผ๋ก ์ ์ผํ ํ์๋ ์์ผ๋ ํ์ ์๋ฆฌ๋จผํธ ์ฌ์ด์์๋ ์ ์ผํด์ผํ๋ค.
๋ง์ฝ ์ ๋ํฌํ ๊ฐ์ด ์์ ๊ฒฝ์ฐ ๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ฅผ key ๊ฐ์ผ๋ก ์ฌ์ฉํ๊ธฐ๋ ํ๋ค. ํ์ง๋ง ์ด๋ ๋ฐฐ์ด์ด ๋ค๋ฅด๊ฒ ์ ๋ ฌ๋ ๊ฒฝ์ฐ๊ฐ ์์ ๊ฒฝ์ฐ ๋นํจ์จ์ ์ผ๋ก ๋์๋ ์๋ ์๋ค.
React๊ฐ ์ด๋ป๊ฒ ๋์ํ๋ ๋ฐฉ์์ด๋ก ์ด๋ค์์ผ๋ก ๋ ๋๋งํ๋์ง ์์ธํ ์๊ฒ ๋์๋ค.
๋ํ key๊ฐ์ ์ ๋ถ์ฌํ๋์ง๋ ์ด๋ฒ ํ์ต์ ํตํด ์๊ฒ ๋์๋ค.
ํญ์ map์ผ๋ก ๊ฐ์ ๋ณด์ฌ์ค ๋ key๊ฐ์ ๋ถ์ฌํ๋ค๋ ์ด์ ๋ ์ฌ๊ธฐ์ ์๋ ๋ฏ ์ถ๋ค.
์ต๋ํ id๋ฅผ key๊ฐ์ผ๋ก ์ฌ์ฉํ๋ ๋์ฒดํ ๊ฐ์ด ์์ ๊ฒฝ์ฐ id๋ฅผ ์ฌ์ฉํ๋ค๋ ์ ์ ์ฐธ๊ณ ํด์ผ๊ฒ ๋ค. ๋ฌผ๋ก ์ด๊ฒ ์์ ํ ๋ต์ ์๋ ์ ๋ ๊ฐ์ด ์์๋์ด์ผ๊ฒ ๋ค.
๋ค๋ฅธ Hook์ ๋ํ ๋ด์ฉ๋ ๋ฐฐ์ ์ง๋ง ๋ด์ฉ์ด ๊ธธ์ด์ง ๊ฒ ๊ฐ์ ๋ถํ ํด ์ ๋ฆฌํ ์์ ์ด๋ค.