key는 어떻게 왜 사용?

추첨하기 구현 링크

이전 내용을 참고하려면 위 링크를 참고하면 된다.

이전 코드를 실행하면 잘 실행이 되지만 개발자 창을 보면 Warning이 떠있는 것을 볼 수 있다.
key가 설정되어 있지 않아 발생하는 것이다.

  const result = pickedCards.map(pickedCard =>
  	<BusinessCard 
    	info={pickedCard} 
        key={pickedCard.phoneNumber} 
    />
  );

key를 넣어줄 때에는 map() 함수 내부에 있는 엘리먼트에 넣어주어야 한다.
여기서는 pickedCard에서 phoneNumber 특성이 unique하기 때문에 pickedCard.phoneNumber로 설정했다.

<key 사용 이유>
1. React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움.
2. 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

만약에!!!!

<li> 엘리먼트에 key 속성이 없으면??

key가 없을 때는 리스트를 순차적으로 비교하며 변화 감지

<li> 엘리먼트에 key 속성이 있으면??

key가 존재할 땐, 리액트는 original DOM 과 비교하여 어떤 요소만 변화가 있는지 빠르게 찾아낼 수있음.
효율적인 DOM 사용 가능