JSX Key 속성

 

● JSX Key 속성이란?

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

키는 React가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 된다. 

요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 한다.

 

 

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

 

 

-> 바뀐 가상 돔을 생성하여 랜더링한 다음, 이전 가상 돔과 이번에 바뀐 가상 돔을 서로 비교하여 바뀐 부분을 파악하여 바뀐 부분만 실제 돔에 적용해준다.

 

 

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

 

 

이렇게 하기 위해서 

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

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