김민태의 데브캠프 2기 - JSX Key 속성은 무엇인가?

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

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

리액트는 가상 돔을 이용하여 바뀐 부분만 실제 돔에 적용
그럼 리스트를 나열할 때 바뀐 부분만 어떻게 찾을까? -> key를 이용해서 인식한다.

 

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


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

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

 

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>

3번을 1, 2번 앞에 추가할 때는 React가 모든 요소가 새롭게 인식하여 모든 자식 엘리먼트를 새로 그린다.(key가 없다면)

이 경우 key를 추가하여 1 2번을 새로 그리는 것이 아닌 3번을 추가한 후 1,2번은 자리만 이동한다.

따라서 key에는 유니크한 값을 넣어야한다 (index는 비추천)

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

 

위 코드에서처럼 0인덱스 값이 1이었는데 값(3)이 추가되면서 0인덱스의 값이 3이 되었다.