[React] 리스트에 key 값을 잘못 입력하면 어떻게 될까?
서론
리액트에선 리스트 컴포넌트에 key 값을 입력하도록 권장합니다. 오늘은 그 까닭과 올바른 key 값을 입력하지 않으면 어떤 문제가 발생할 수 있는지 함께 살펴보도록 하겠습니다.
본론
키 값을 입력해주는 것은 왜 중요할까?
질문에 답을 하기에 앞서서, 리스트 형태의 리액트 컴포넌트에 key 값을 입력해주는 것은 왜 중요할까요? 목록의 데이터 간 값 비교를 사용자가 입력한 key 값을 바탕으로 하기 때문입니다.
올바르지 못한 key 값을 입력하면 어떤 에러가 발생될까?
흔히 하는 실수가 Array의 map 메서드의 index를 key 값으로 제공하는 것입니다. 허나, 이는 배열의 원소가 삭제/추가되어 배열의 순서가 변동되는 경우에는 적합하지 않습니다. 아래의 예제처럼 말이죠. 실제 동작은 해당 링크를 통해 확인하실 수 있습니다. 저는 에러 트리거를 보여드리는 것으로 설명을 갈음하겠습니다.
여기서 맨 앞에 값을 추가해보면, 입력하지 않았음에도 index가 같기 떄문에 ID 1에 입력된 값 '11111'이 입력되어 있는 것을 확인할 수 있습니다.. 이처럼 사용자가 컴퍼넌트에 잘못된 key 값을 입력하면 UI 버그가 생길 수 있습니다.
올바른 리스트 key의 조건
그렇다면 올바른 key 값의 조건은 무엇일까요? 공식문서에 따르면, 아래 두 가지 조건을 만족해야 합니다.
1) 형제 사이에서의 고유한 값이어야 합니다. 이 때 형제란, 배열의 원소로 함께 렌더링되는 JSX 태그를 의미합니다. 형제관계가 아닌 요소와는 중복되어도 됩니다!
2) 값이 변하지 않고, 예상 가능하며, 유일해야 합니다. 예를 들어, Math.random()으로 생성된 key 값을 사용하면 많은 컴포넌트 인스턴스와 DOM 노드가 불필요하게 재생성하여 성능 악화 혹은 자식 컴포넌트의 state 유실을 초래한다고 합니다.
마무리
이상으로 간단하게 리스트와 key에 관하여 알아보았습니다. 읽어주셔서 감사합니다!
참고한 사이트
https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318
https://ko.reactjs.org/docs/lists-and-keys.html
https://ko.reactjs.org/docs/reconciliation.html#recursing-on-children