JSX Key 속성 이해하기

JSX Key 속성은 무엇인가?

리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야합니다.
키는 React가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 됩니다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 합니다.

리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용

가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용해준다고 했습니다.
리액트에서는 리스트를 나열할 때 바뀐 부분만 찾을 때 어떻게 할까요?

Key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있습니다.

{/*before*/}
<ul>
	<li>1</li>
    <li>2</li>
</ul>

{/*after*/}
<ul>
	<li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

3번을 1,2번 뒤에 추가할 때는 React가 3번만 추가하면 된다고 인식한다.

{/*before*/}
<ul>
	<li>1</li>
    <li>2</li>
</ul>

{/*after*/}
<ul>
	<li>3</li>
	<li>1</li>
    <li>2</li>
</ul>

3번을 1,2번 앞에 추가할 때는 React가 모든 요소가 새롭게 된거라 인식하고 모든 자식 엘리먼트를 새롭게 그려버립니다.

이 경우 Key를 추가해서 1,2번을 새롭게 그리는 것이 아닌 3번을 추가한 후 1,2번은 자리만 이동해줍니다.

Key에는 유니크한 값을 넣어줍니다.(index는 비추천)

index도 0부터 시작해서 유니크한 값을 가지지만 만약 리스트가 추가되거나 제거되면 해당 리스트들의 key값도 바뀌게 됩니다.

{/*before*/}
<ul>
	<li key={0}>1</li>
    <li key={1}>2</li>
</ul>

{/*after*/}
<ul>
	<li key={0}>3</li>
	<li key={1}>1</li>
    <li key={2}>2</li>
</ul>