리액트로 개발하다 보면 종종 콘솔창에 위의 경고가 나타나는 것을 볼 수 있다 사실 key 값만 추가해주면 경고가 사라진다는 건 알고 있지만 잘 작동하기만 하면 되는거 아닌가? 라는 생각에 무시하고 넘어가 적이 있었다
에러도 아니고 경고일 뿐인데 꼭 key 값을 추가해야 할까?
key란?
key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다 key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다
따라서 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있도록 해야 하고, 대부분의 경우에는 데이터의 ID를 key로 사용한다
실제로 적용해서 위의 코드를 아래의 코드로 바꿔주면 경고는 사라진다
