React에서 map메소드를 통해 배열에 담긴 값을 컴포넌트에 넘겨주면서 여러번 렌더링 할 수 있다.
{comments.map(el => {
return <Comment comments={el} />;
})}
- 하지만 map함수 사용시 key 값을 넘겨주지 않으면 이러한 에러가 발생한다. 각 리스트에는 고유의 키를 가져야 한다는 것이다.
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.
Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 대부분의 경우 데이터의 ID를 key로 사용한다.
{comments.map((el, index) => {
return <Comment key={index} comments={el} />;
})}