JSX 요소를 map() 안에 바로 사용하는 경우 항상 key 값이 필요하다.
해당 이유는 리액트 공식문서에 잘 나와있다. 이전에 읽고 넘어갔었는데 막상 면접에서 질문이 나오니 명확한 답변을 하기 어려워 이렇게 다시 정리해보게 되었다.
KEY
key 는 각 어떤 아이템이 어떤 컴포넌트에 해당하는지 리액트에게 알려주는 역할을 하고, 이에 맞게 매칭시켜준다. 이는 배열 아이템을 움직이거나(정렬 등의 문제로) 삽입, 삭제를 하는 경우 중요한 부분이다. 그래서 키를 잘 선택해야 하는데, 데이터 안에 키를 포함시키는 것이 좋다.
KEY 규칙
- siblings 사이에서 유니크한 값이여야하지만, 다른 배열의 JSX 노드라면 같은 키를 사용해도 괜찮다.
- 키는 변경되면 안된다. 렌더시에 만들지 않아야 한다.
리액트는 왜 KEY가 필요한가?
컴퓨터에 이름없는 파일들이 여러가지 있다고 생각해보자. 첫번째 파일, 두번째 파일, 세번째 파일....
파일을 지우기 시작하면 어떤 파일이 무엇인지 헷갈리게 된다. 두번쨰 파일이 첫번째가 되고, 세번째가 두번째가 되고.. 이런식이다.
폴더의 파일명과 배열에서의 JSK 키는 비슷한 목적을 가진다. sibling 사이에서 아이템을 식별하기 위함인 것이다. 렌더링중 재배열때문에 position이 변경되다고 해도, 리액트는 lifetime 동안 해당 아이템을 식별한다.
함정
인덱스 키
사실 key를 주지 않으면 리액트는 인덱스를 키값으로 기본으로 사용한다. 하지만 배열이 재배치 되는 경우 아이템의 순서는 변경된다. 인덱스 키는 버그를 만들 수도 있다.
중간에 아이템을 삭제, 삽입하는 경우, key가 이전과 동일하다면 리액트는 동일한 DOM element를 보여주게 된다(❗️bug)
Math.random()을 사용한 키
이 경우, 렌더시 키 값이 절대 매칭되지 않아서, 매번 컴포넌트와 DOM이 새로 만들어진다. 속도도 느릴뿐 아니라 아이템의 사용자 입력값 또한 잃어버리게 된다.
참고: https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318
