React 렌더링시 key값이 필요한 이유

리액트를 사용하면서도 이 key의 역할을 잘 몰랐다. 역할을 잘 모르니 프로젝트를 할때마다 밑에 콘솔창의 에러를 자주 보곤 했다. 

Warning: Each child in a list should have a unique "key" prop

 

이상하게 이 에러는 콘솔창에는 떠도 화면에는 이상없이 잘 작동했기에 무시하곤 했는데, 대체 이 key라는 것은 어떤 역할을 하는 것인지 궁금해서 알아보기로 했다. 

 

번역기를 돌려보니 

경고: 목록의 각 자식에는 고유한 "키" 소품이 있어야 합니다.

라고 한다.

 

한마디로 각 요소는 key라는 고유한 prop값을 가져야 한다는 경고이다. 

 

key 값을 넣어주지 않아도 화면에 렌더링은 되지만 key가 없을때 리액트는 자식 요소의 변동을 감지하고 렌더링 할 때 비효율적으로 작동하게 된다고 한다. 

 

그래서 key의 역할은 React가 어떤 항목을 변경하거나 추가 또는 삭제할때 식별하는 것을 도우며

어떤 항목의 변경사항을 알아차리기 위해 key가 필요하다. key가 있어야 쓸데없이 렌더링을 하지 않기 때문이다. 

 key값이 있다면 변화가 감지된 부분만 렌더링 하게 된다.

 

key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다고 한다.

 

 

 

느낀점

key.. 중요한 녀석이였군,