[React] React Diffing Algorithm

์œ ์•„ํ˜„ยท2023๋…„ 1์›” 24์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
17/28
post-thumbnail

๐Ÿ“Œ React Diffing Algorithm

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 ํŠธ๋ฆฌ๋ฅผ ํƒ์ƒ‰ํ•˜๋Š” ๋ฐฉ๋ฒ•

React๋Š” ๊ธฐ์กด์˜ ๊ฐ€์ƒ DOM ํŠธ๋ฆฌ์™€ ์ƒˆ๋กญ๊ฒŒ ๋ณ€๊ฒฝ๋œ ๊ฐ€์ƒ DOM ํŠธ๋ฆฌ๋ฅผ ๋น„๊ตํ•  ๋•Œ, ํŠธ๋ฆฌ์˜ ๋ ˆ๋ฒจ ์ˆœ์„œ๋Œ€๋กœ ์ˆœํšŒํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ํƒ์ƒ‰ํ•œ๋‹ค. ์ฆ‰ ๊ฐ™์€ ๋ ˆ๋ฒจ(์œ„์น˜)๋ผ๋ฆฌ ๋น„๊ตํ•œ๋‹ค๋Š” ๋œป์ด๋‹ค. ์ด๋Š” ๋„ˆ๋น„ ์šฐ์„  ํƒ์ƒ‰(BFS)์˜ ์ผ์ข…์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.


[๊ทธ๋ฆผ] React์˜ DOM ํŠธ๋ฆฌ ์ˆœํšŒ ๋ฐฉ์‹

React๋Š” ์ด๋Ÿฐ ์‹์œผ๋กœ ๋™์ผ ์„ ์ƒ์— ์žˆ๋Š” ๋…ธ๋“œ๋ฅผ ํŒŒ์•…ํ•œ ๋’ค ๋‹ค์Œ ์ž์‹ ์„ธ๋Œ€์˜ ๋…ธ๋“œ๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ํŒŒ์•…ํ•ด ๋‚˜๊ฐ„๋‹ค.

โœจ ๋‹ค๋ฅธ ํƒ€์ž…์˜ DOM ์—˜๋ฆฌ๋จผํŠธ์ธ ๊ฒฝ์šฐ

๊ทธ๋Ÿฐ๋ฐ 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 ๋˜ํ•œ ํŒŒ๊ดด๋œ๋‹ค.

โœจ ๊ฐ™์€ ํƒ€์ž…์˜ DOM ์—˜๋ฆฌ๋จผํŠธ์ธ ๊ฒฝ์šฐ

๋ฐ˜๋Œ€๋กœ ํƒ€์ž…์ด ๋ฐ”๋€Œ์ง€ ์•Š๋Š”๋‹ค๋ฉด 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)

๋งŒ์•ฝ ์ž์‹ ๋…ธ๋“œ๋“ค์ด ์ด 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 ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•ด๋ฒ„๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— ๋น„ํšจ์œจ์ ์œผ๋กœ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€