왜 리액트는 map으로 component을 렌더링할때 key가 있어야 하나?

일단은 간단한 이유를 공식 learning 문서에서 확인할 수 있었다.

https://react.dev/learn/rendering-lists

Rendering Lists – React

 

문서의 내용을 번역하면 다음과 같이 나온다.

React가 키를 필요로 하는 이유는 무엇일까요?

만약 데스크톱의 파일들이 이름이 없다고 상상해보세요. 대신에 파일을 그들의 순서로 참조해야 할 것입니다 — 첫 번째 파일, 두 번째 파일 등. 이에 익숙해질 수 있겠지만, 한 번 파일을 삭제하면 혼란스러워질 것입니다. 두 번째 파일은 첫 번째 파일이 되고, 세 번째 파일은 두 번째 파일이 되는 식입니다.
폴더 내 파일 이름과 배열에서의 JSX 키는 비슷한 목적을 가집니다. 이들을 사용하면 형제 간에 항목을 고유하게 식별할 수 있습니다. 잘 선택된 키는 배열 내의 위치보다 더 많은 정보를 제공합니다. 재정렬로 인해 위치가 변경되더라도 키를 통해 React가 항목을 전체 수명 동안 식별할 수 있습니다.

 

정리해보자면 하나의 배열이나 리스트가 인덱스가 없다면 나타나게 되는 특징들을 적어놓았다. 그래서 해당 단점들이 어떻게 실제 리액트가 JSX를 렌더링하는데 어떤 방해가 있는지 알 수 없다고 생각했다. 여기서 legacy 문서를 살펴보면 조금 더 명확한 이유를 알 수 있었다. 그건 바로 재조정 (Reconciliation) 때문인 것을 알수 있었다.

 

간단히 정리하면 리액트의 특징중 하나는 특정 JSX의 변경이 발생하여도 모든 페이지를 리렌더링하는 것이 아닌 변화가 발생한 부분만 렌더링하는 특징이 있었다. 반면에 만약 컴포넌트 리스트에 key가 없다면 key로 각 컴포넌트를 식별할 수 없다니 해당 컴포넌트 리스트중 하나라도 변화가 발생하면 모든 컴포넌트를 전부 렌더링해야 된다는 단점이 발생한다.

 

더 자세한 내용은 아래 글을 참고하자.

https://ko.legacy.reactjs.org/docs/reconciliation.html

재조정 (Reconciliation) – React