공식문서에 의하면, Key는
-
React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕고,
-
엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다
라고 한다.
key가 없을 때는 리스트를 순차적으로 비교하며 변화를 감지한다.
하지만 key가 존재할 땐, 리액트는 original DOM 과 비교하여 어떤 요소만 변화가 있는지 빠르게 찾아낼 수 있다. 즉, 이전처럼 모든 리스트를 순회할 필요 없이, 새롭게 추가된 사항만 업데이트 시킬 뿐이다. key 를 사용하면 기존의 요소는 리렌더링하지 않고 변화가 감지된 요소만 리렌더링하여 효율적인 DOM 사용이 가능하다.
결국 React 에서 key 를 사용하는 이유는 엘리먼트 혹은 컴포넌트의 변화를 감지하기 위함이고 이는 효율적인 DOM 조작으로 귀결된다.
