React ) map 함수와 key props

 Key 

React 공식문서에 정의된 내용이다.

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

---

map을 사용시 key값을 부여하는 가장 큰 이유는 고유성을 부여하는 것으로

사실 key값을 부여하지 않아도 에러는 발생하지 않지만 경고가 뜨게 된다. 

 

예를 들어 map함수로 각 각 1,2,3 이라는 가로줄 div를 만들고 새로 4라는 새로운 객체를 추가해서 보여준다면

리액트는 다시 처음부터 1,2,3,4 이렇게 재렌더링을 한 후에 보여주지만

key값으로 고유성을 부여하게 되면 바로 4만 새로 추가해 렌더링하여 보여주기 때문이다.

 

즉 key는 각 배열 인자에 고유성을 심어 변화가 생기는 부분만 찾아 항목에 렌더링하여

프로그램이 좀 더 원활하고 효율적으로 돌아가게 하기 위함이다. 

 

또 한 key값으로 index를 줘도 되지만 지향하는 것이 좋다.

인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트 state와 문제가 발생해 항목의 순서가 바뀔 때

key 또한 바뀌기 때문에 state가 엉망이 되거나 의도치 않은 방식으로 변화할 수 있기 때문이다.

 

 

그렇기에 기존 댓글창에 고유한 id값을 만들어 key값으로 부여해 각각 식별할 수 있게 바꾸었다 !