React 에서 collections 를 사용 할 때 key 의 중요성 에 대한 상세 한 설명

머리말
React 에서 render collections 의 items 를 사용 할 때 Keys 는 중요 한 역할 을 하고 다음 rendered 와 re-rendered 를 직접 결정 합 니 다.다음은 더 이상 말 하지 않 고 상세 한 소 개 를 해 보 겠 습 니 다.
React 중복 되 지 않 는 keys
이것 을 철저히 이해 하기 위해 서,우 리 는 이러한 배열 을 성명 한다.

const nums = [1, 2, 3, 5, 2]; //             

지금,우 리 는 react 에서 render 를 합 니 다.

<ul>
 {nums.map(num => <li key={num}>{num}</li>)}
</ul>

이 작은 코드 로 구 성 된 이상 적 인 element 구 조 는 이 렇 을 것 입 니 다.

<ul>
 <li key="1">1</li>
 <li key="2">2</li>
 <li key="3">3</li>
 <li key="5">5</li>
 <li key="2">2</li>
</ul>

하지만 실제 DOM 은 이 렇 습 니 다.

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>5</li>
</ul>

React 는 다음 과 같은 warning 을 주 었 습 니 다.
 
배열 의 요소 에 유일한 key 값 을 제공 해 야 한 다 는 뜻 이다.
React 는 어떤 key 가 가리 키 는 내용 에 변 화 를 일 으 키 는 요 소 를 re-render 합 니 다.
users 집합 에 user 를 추가 하 는 예 를 보 겠 습 니 다.

const users = [
 {username:'bob'},
 {username:'sue'}
];

users.map((u, i) =>
 <div key={u.username}>{u.username}</div>);

render 결 과 는 다음 과 같 습 니 다.

<div key="bob">bob</div>
<div key="sue">sue</div>

이제 users 를 업데이트 합 니 다.

const users = [
 {username:'joe'},
 {username:'bob'},
 {username:'sue'}
];

render 의 결 과 는 다음 과 같 습 니 다.

<div key="joe">joe</div>
<div key="bob">bob</div>
<div key="sue">sue</div>

위의 예 에서 React 는 Reconciliation 알고리즘 을 호출 한 다음 에 되 돌아 온 결 과 는 key 가 sue 인 새로운 요 소 를 users 의 맨 앞 에 추가 한 것 입 니 다.
키 를 선택 하 는 방법
사실 내용 에 변화 가 없 더 라 도 대응 하 는 key 값 을 바 꾸 면 React 는 re-render 를 촉발 합 니 다.
map 함수 의 index 를 요소 의 key 로 사용 하 는 것 은 개발 자 에 게 흔히 볼 수 있 습 니 다.필요 할 때 도 있 지만 성능 이 떨 어 지 는 문제 도 있 습 니 다.

users.map((u, i) =>
 <div key={i}>{u.username}</div>);

아니면 이상 의 예 입 니까?작은 변 화 를 한 후에 React 는 한 단계 에서 세 단계 로 바 뀌 었 습 니 다.

id 를'1'로 하 는 요 소 를'bob'에서'joe'로 변경 합 니 다

id 를'2'로 하 는 요 소 를'sue'에서'bob'로 변경 합 니 다

id 가'3'인 요 소 를 추 가 했 는데 그의 값 은'sue'입 니 다

총결산
그래서 우리 가 collections 를 사용 할 때 키 를 잊 어 서 는 안 될 뿐만 아니 라 좋 은 키 를 선택 하 는 것 도 배 워 야 한다.
자,이상 이 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
링크