#개발공부 : 리액트에서 key를 쓰는 이유/필요한 이유?

 리액트에서 Key값이 필요한 이유

배열 map함수 사용시, key값을 넣지 않으면 콘솔에서 아래와 같은 문구를 발견할 수 있다.

렌더링엔 전혀 문제가 없지만, 비효율적이라고 말한다.

 

그런데 내가 듣는 인강에선 아무도 왜 비효율적인지 자세히 설명해주지 않았다.

 

 

React 공식문서상,

Key는 어떤항목이 변경, 추가 그리고 삭제 될 경우 리액트가 식별하는 것을 돕고, 

배열 내 element에 안정적인 고유성을 주기위해 지정되야 한다.

 

 

고유성 부여를 위해 key값은, 배열의 각 항목 간 서로를 식별 할 수 있는 문자열을 사용하는 것이 좋으며, 불가능할 경우 index를 사용한다.

하지만 index는 좋은 방법은 아니라고 한다.(배열의 처음이나 중간에 새로 데이터가 삽입, 수정, 삭제될 경우 그 부분만을 캐치할 수 없다.)

 

key가 없다면 element들을 순차적으로 비교하면서 변화를 감지하고 key가 있을 때보다 더 많은 시간을 사용하게 된다.

 

결국, React에서 Key를 사용하는 이유는 변화감지와 시간절약 그리고 성능최적화이다.