JSX Key 속성

리액트에서는 요소의 리스트를 나열할 때 key를 넣어줘야한다.

key는 React에서 변경하거나 추가 또는 제거된 항목을 식별하는데 도움이된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야한다. 

 

key에는 유니크한 값을 넣어주는데 index는 리스트가 추가되거나 제거되면 해당 리스트들의 키값도 변경되서 추천하지 않는다. 

{/* before */}
<ul>
	<li key={0}>1</li>
    <li key={1}>2</li>
</ul>
{/* after */}
<ul>
	<li key={0}>3</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>