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

map 함수를 적용할 때 왜 key props를 부여해야 할까?

나도 map으로 댓글 추가 기능을 구현할 때 key props를 부여했다.

{props.comment.map((data, i) => {
    return <YourComment key={i} data={data} />;
})}

이렇게 말이다!

간단하게 말하면 그래야 리액트가 댓글들을 각각 구분할 수 있기 때문이다.

 

만약 map을 돌릴 때 key값을 넣어주지 않으면

이렇게 콘솔에 warning메세지가 뜬다.

---

key에 대해 더 알아보기

key는 element list를 만들 때 포함해야하는 특수한 문자열 속성이다.

arr.map()안에서 리스트의 각 항목에 key를 할당해야한다.

number.toString()으로 굳이 문자열로 바꿔주나 했는데  key는 문자열 속성이기 때문!

- key는 React가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는다.

 

- key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 

대부분은 데이터의 ID를 key로 사용한다.

만약 ID가 정 없다면 그리고 항목의 순서가 바뀌지 않을거라면 '최후'의 수단으로 index를 key로 사용해도된다.

 

-  map() 함수 내부에 있는 엘리먼트에 key를 넣어 주는 게 좋다.

 

왜 나는 key에 index를 사용했는가?

근데 누군가는 내 코드에 의문이 들수도 있다.

React 홈페이지에서 key에 index를 사용하는 것은 권장하지 않기 때문이다.

그럼에도 나는 key에 index를 사용했다.

지금의 내 코드에서는 별 문제가 없기 때문이다!

 

Robin Pokorny’s가 작성한 글을 보면

https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

나는 단순히 댓글을 추가하는 기능이기 때문에 index를 사용할 수 있었다.

만약 삭제기능까지 추가하면 항목의 순서가 바뀌기 때문에 고유한 key값을 넣어줘야한다.

리액트 공식문서에 너무나도 설명을 잘 해놓았다👩🏻‍💻

https://ko.reactjs.org/docs/lists-and-keys.html

리스트와 Key – React