map 함수 적용시 key props를 부여하는 이유

Key
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

Key는 위의 설명처럼 어떤 항목을 변경, 추가 또는 삭제할지 식별하게 해주는 포인터와 같은 역할을 한다.
그러나 여기에 한가지를 덧붙이자면, DOM에서 식별하는 것이 아니라, Virtual DOM에서 이를 식별한다는 것이다.

  const [listComments, setListComments] = useState([{ name: '', comment: '' }]);


  <div>
    {listComments.map(el=> (
       <Comment name={el.name} comment={el.comment} />
    ))}
   </div>

el은 매개변수로 listComments를 받는다. 그러나 다 받는 것이 아니고 하나씩만 받는다.
예를들어 아래와 같이 1, 2, 3, 4를 map 넣으면 2씩 곱해서 하나씩 하나씩 돌려준다.

const array1 = [1, 2, 3, 4];

// pass a function to map
const map1 = array1.map(x => x*2);

console.log(map1);
// expected output: Array [2, 4, 6, 8]

이 map을 이용해서 listcomments의 name과 comments에 접근해서 변화된 값을 탐지해서 Virtual Dom에 수정을 해주고 그것을 DOM과 비교해서 바뀐 부분을 수정한 화면을 렌더링 하게 된다.
만일 키값을 쓰지 않는다면 컴퓨터가 뭐가 뭔지 인지를 못하고 다시 처음부터 만드는 식으로 하지만, key값을 줌으로써 필요한 부분만 수정하는 식으로 할 수 있게 된다. 여기서 key 값은 최상위 요소에 쓰여져야 하고, 서로 겹쳐지지 않게 unique해야 한다. 그래서 보통 id 값 등을 넣어준다.

• 참고자료:

1. https://ko.reactjs.org/docs/lists-and-keys.html
2. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
3. https://react.vlpt.us/basic/11-render-array.html