Key prop
반복으로 생성될 때 key를 사용하지 않으면 다음과 같은 상황이 발생할 수 있다.
- 사용자가 정해 놓은 상태를 변경할 수도 있다.
- 잠재적인 성능 이슈가 발생 될 수 있다.
- 예상치 못한 버그가 생길 수 있다.
리액트는 개별 아이템을 똑같이 평가하기에 새로운 아이템이 추가되어도 감지하지 못한다.
그래서 key를 설정하라는 경고문을 띄우는 것.(감지하지 못한다고 사전에 얘기해 주는 것.)
key prop은 새로운 아이템을 추가하면 알릴 수 있는 기능이다.
key prop은 사용자가 만든 컴포넌트, HTML 요소 모두 key prop을 추가 가능하다.
만약 컴포넌트나 HTML에 key를 추가하면 REACT가 개별 아이템을 식별할 수 있도록 도와준다. 이를 위해 목록 아이템 당 개별 key를 설정해줘야 한다.
map 함수의 2번째 parameter인 index를 키 값으로 사용하는 것은 지양한다.
특정 아이템의 index는 항상 같으며 아이템 콘텐츠에 직접적으로 첨부되지 않기 때문이다.그래서 ID를 첨부하는데 각 아이템이 특정 콘텐츠를 가지고 있을 때 확실히 고유의 ID가 나오기 때문이다.
고유의 ID ?
REACT는 JSX가 랜더링 될 때 암호문 같은 className을 부여한다.이렇게 생성된 className은 데이터베이스 같은 곳에서 받아 오기 때문에 고유함을 지킬 수 있다.
key 값으로는 어떤 숫자나 문자열도 고유 식별자가 될 수 있다.
