react에서의 오류 발생
react에서 맵 함수 사용시 key props를 지정해주지 않으면 이런 오류가 나는 모습을 볼 수 있다.
동작하는데는 큰 문제가 없어보이지만 이 오류는 왜 나타나는 것이며 key props는 어떤 의미를 갖는 것일까?
react에서 key란
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는 이름표같은 역할을 한다.
key가 없어도 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지할 수 있지만, key 가 있다면 변화를 훨씬 빨리 인식할 수 있다.
(key가 없다면 map 함수를 이용해 변화를 감지할 때 하나의 변화만 감지해도 모든 요소를 새로 랜더링해 비효율적이라고 볼 수 있다.)
key값을 설정하려면
key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다.
정말 유니크한 값만 들어가야 하며, (핸드폰 번호, email, id 등...) 고유한 정보가 없다면 index를 key 값으로 줄 수 있다.
{comments.map((el, index) => ( <NewComment key={index} cmtName={el.cmtName} cmtContent={el.cmtContent} id={el.id} like={el.like} removeComment={removeComment} likeComment={likeComment} />위의 코드는 index 값을 key에 넣어보기 위해 작성한 것이고, id, email 처럼 활용할 수 있는 고유한 데이터가 있다면 그 값을 key 값으로 주는게 좋다.
index를 key 로 사용할 경우, 배열이 변경될 때(예를 들어 댓글이 중간에서 삭제가 된다거나 할 때!) 효율적으로 리렌더링 하기 힘들다고 한다.
참고로, 이 때 부여해주는 key 값은 react 에서 식별하기 위해 주어지는 값이고, 우리가 다른 메서드나 이벤트에서 사용할 수는 없다.
만약 index 정보가 필요하다면, 따로 index={idx} 로 index 정보를 부여해줘야 한다.
