시작
이번에는 Robin Pokorny’s가 작성한 인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명을 읽고 Index를 Key로 사용하면 안되는 이유와 대처방안에 대해 포스팅 해보려고한다.
key와 index
만약 우리가 배열을 사용할때 key값을 넣지 않는다면 다음과 같은 문구를 볼 수 있다.
Each child in an array should have a unique “key” prop.
해당 문구는 자식에 대한 재귀적 처리 (Reconcilation) 때문이다.
DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다.
예를 들어, 자식의 끝에 엘리먼트를 추가하면, 두 트리 사이의 변경은 잘 작동할 것이다.
<ul>
<li>first</li>
<li>second</li>
</ul>
/** third를 추가 */
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>하지만 위와 같은 방법은 성능에 좋지않다. 왜냐하면 first,second,third 부분이 모두 다르다고 판단하고
모든 자식을 변경하기 때문이다.
이러한 문제를 해결하기 위해 react에서는 key값을 지원한다.
기존에 가지고있던 dom 트리와 변경된 가상 dom에서 key값을 비교해 변경을 한다면, first,second,third를 모두 바꾸지 않고 third만 추가하는 방식으로 일부분만 변경이 가능하기 때문이다.
또한 index를 키값으로 사용하게 된다면 원치 않은 결과가 나올 수 있다.
따라서 key를 index로 사용한다면 배열의 처음이나 중간에 새로 데이터가 삽입,삭제시 그 부분만을 캐치하지 못한다. 그렇기 때문에 eslint에서도 에러가 나는것이고, index를 key로 하는것은 지양해야한다.
index를 사용해도 되는경우
내가 참고한 Robin Pokorny 의 블로그에 따르면 다음과 같은 경우에서는 사용해도 된다고한다.
- 정적이거나 변경의 여지가 없을 때
- id가 없을 때
- 리스트가 절대로 재정렬되거나 필터링이 되지 않을 때
그럼 어떻게해?
제일 좋은것은 db에서 사용하는 고유 id 값이다 하지만 모든 상황에서 맞는 데이터는 없을 것이다.
아니 저희 백엔드가 고유한 key값을 안내려주는데요? 그럼 어쩌죠?..
그렇다면 어떻게 해야할까? 당시에 떠오른것은 Math.random() 을 사용할까 생각했는데 react 공식 문서에서 해당 함수는 사용하지 말라고 나와있다.
key는 반드시 변하지 않고, 예상 가능하며, 유일해야 합니다. 변하는 key(Math.random()으로 생성된 값 등)를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있습니다.
물론 예상이 가능하지는 않지만 shortid 를 사용하는게 최상의 대안이 아닐까 생각이 든다.
결론
요새 react document를 다시 읽고 있는데, 예전에는 발견하지 못했던 좋은 내용들이 많다.
예전에는 그 만큼 보는 시야가 좁았던것 같다.. 앞으로는 react document + 회사 내부 스터디 + 사용했던 기술 정리를 포스팅하는 블로그가 될 것 같다.
