[React] key JSX 속성이 필요한 이유

React에서는 여러가지 HTML 엘리먼트들을 표시할 때 map() 함수를 이용하는데, 이때 key JSX 속성을 넣지 않는다면 리스트의 각 요소에는 key를 넣어야 된다는 경고 가 표시된다.

어떤 경고? key를 설정하지 않았을 때 다음과 같은 경고를 볼 수 있다...

Each child in an array should have a unique “key” prop

---

🤔 React에서 왜 Key 속성이 필요할까?

리액트에서는 컴포넌트의 상태나 속성이 변할 때마다 render()라는 함수를 호출한다.
이 함수에서는 새로운 리액트 요소 트리를 반환하게 되고, 반환한 트리와 기존의 요소 트리를 비교하여 새로운 변경점에 대해서만 재렌더링을 하게 된다. 이렇게 두 트리를 비교하기 위해서 key 속성을 사용하는 것이고 자식 요소들을 반복적으로 렌더링하는 상황에서 명시적으로 key를 사용하는 것이라고 할 수 있다!

🙄 key를 생략하게 된다면 렌더링하는 데에는 문제는 없지만...

1. 리액트가 어떤 항목을 변경하고 추가, 삭제할지에 대한 식별을 돕고
2. 엘리먼트에 안정적인 고유성을 부여하기 위해서

💥 배열 내부의 엘리먼트를 지정해야 한다.

key 값은 값이 변하지 않는, 유일성을 가지게 된다. (유일한 식별자의 역할)
이러한 고유성을 부여하기 위해서 key를 배열 각 요소(항목) 간에 서로를 식별할 수 있게 하는 문자열을 사용하는 것이 좋으며 대부분 데이터의 ID를 key로 사용한다

❗ 데이터 요소 안에 ID라는 프로퍼티가 존재할 때만 가능!

const itembox = items.map( item =>
	<div key = {item.id}>
  		<h3>{item.title}<h3>
        <p>{item.price}</p>
  	</div>
);

---

[참고 블로그]
1. https://junior-datalist.tistory.com/184
2. https://merrily-code.tistory.com/187