키 값이 지정되지 않은 경우 다음 코드가 콘솔에 출력됩니다.
의미를 조금 해석하면 PokemonList의 키 값이 결정되지 않아 오류가 발생할 수 있다고 합니다. 그러나 화면 렌더링은 정상적으로 작동합니다. 이에 대한 React 경고의 문제점은 무엇입니까?
React 공식 문서에 따르면
“배열을 렌더링할 때 키 값이 고유하지 않으면 렌더링이 잘못될 수 있습니다.”로 결론 지을 수 있다
키값 생성 시 주의사항
- 목록을 만들 때 포함해야 하는 특수 문자열 속성입니다.
- 키 값은 일부 고유 항목을 나타냅니다. 변경, 삭제, 추가 또는 식별을 돕는 소품안돼.
- 키 값은 준비 내부 요소로 독창성부여되어야 합니다.
- 키 값은 배열의 인덱스 값으로 사용하면 안 됩니다.
일단 정리할 수 있습니다. 즉, 키 값은 어떤 요소가 변경되었는지 식별하는 데 도움이 되는 소품입니다.
일반 배열을 화면에 렌더링할 때 추가 및 삭제와 같은 작업이 자주 발생할 수 있습니다.
이때 키 값이 없는 경우 다음과 같은 문제가 발생합니다.
- 요소의 값이 변경 또는 삭제되었는지 여부가 불분명합니다.
- React는 상태가 변경되지 않았으며 렌더링하지 않는다고 결정합니다.
첫 번째먼저 (index0 사과, index1 바나나, index2 자몽)이라는 배열을 렌더링한다고 가정해 보겠습니다. 고유한 키 값이 없으므로 인덱스 값을 키 값으로 설정합니다.
이제 바나나를 삭제하고 싶습니다.
그러면 결과는 (사과 0개, 자몽 1개)입니다.
이번에는 자몽을 빼고 바나나를 자몽으로 교체해보려고 합니다.
그러면 결과는 (사과 0개, 자몽 1개)입니다.
그러면 두 경우의 결과 값은 같지만 키 값(인덱스)을 비교하더라도 결과만 보면 어떻게 변했는지 알 수 없다.
If (1: 사과, 2: 바나나, 3: 자몽) id 값이 키로 지정되어 있다고 가정그리고 바나나(1:사과, 3:자몽)를 삭제하면 결과만으로도 어떤 과정이 일어났는지 한눈에 알 수 있습니다.
두번째 이 경우 VirtualDOM(Virtual DOM VDOM이라고도 함)임을 알아야 합니다.
React 및 기타 라이브러리는 일반적으로 VirtualDOM을 사용한다고 들었습니다.
아직 React를 공부하지 않아서 모르겠습니다.
먼저 제가 공부한 라인에 대해 말씀드리자면, 브라우저는 렌더링시 DOM을 사용하고,
React의 VirtualDOM React 구성요소 변경 시기 감지그리고 저장따라서 새로운 DOM을 새로 생성하고 변경된 VirtualDOM과 RealDOM을 비교하여 VirtualDOM을 업데이트한다.
단, 이때 사용되는 리스트의 비교값이 키값이다.
생각해 봅시다. 이 배열에 index를 키 값(0: 사과, 1: 바나나, 2: 자몽)으로 설정하면 바나나깁스 멜론여기에 (0: 사과, 1: 멜론, 2: 자몽)으로 대체 키 값이 변경되었습니까? 인덱스 값은 로고 내부의 내용만 변경했기 때문에 React는 변경되지 않았다고 판단하고 다시 렌더링하지 않습니다..
마치다
키 값에는 고유한 값이 지정되어야 합니다.
키 값이 없으면 다시 렌더링하는 동안 오류가 발생할 수 있습니다.
참조
React에서 키의 역할 – Naver Blog (React 내부 컴포넌트 생성 추가)
https://junior-datalist.184 – React에서 키가 필요한 이유는 무엇입니까?