React에서는 여러가지 HTML 엘리먼트들을 표시할 때 map() 함수를 이용하는데, 이때 key JSX 속성을 넣지 않는다면 리스트의 각 요소에는 key를 넣어야 된다는 경고 가 표시된다.
어떤 경고? key를 설정하지 않았을 때 다음과 같은 경고를 볼 수 있다...
Each child in an array should have a unique “key” prop🤔 React에서 왜 Key 속성이 필요할까?
리액트에서는 컴포넌트의 상태나 속성이 변할 때마다 render()라는 함수를 호출한다.
이 함수에서는 새로운 리액트 요소 트리를 반환하게 되고, 반환한 트리와 기존의 요소 트리를 비교하여 새로운 변경점에 대해서만 재렌더링을 하게 된다. 이렇게 두 트리를 비교하기 위해서 key 속성을 사용하는 것이고 자식 요소들을 반복적으로 렌더링하는 상황에서 명시적으로 key를 사용하는 것이라고 할 수 있다!
🙄 key를 생략하게 된다면 렌더링하는 데에는 문제는 없지만...
- 리액트가 어떤 항목을 변경하고 추가, 삭제할지에 대한 식별을 돕고
- 엘리먼트에 안정적인 고유성을 부여하기 위해서
💥 배열 내부의 엘리먼트를 지정해야 한다.
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
