배열 key props

쓰니까 쓰지말고 뭔지 알고 쓰자

📌 key props

key props는 배열을 렌더링 할 때 필요한 속성으로 React는 각각의 요소를 고유하게 식별할 수 있으므로, 변경된 요소만 업데이트하며 이를 통해 React의 성능을 향상 시킬 수 있다.

📌 Key props를 배열의 인덱스로?

만약 key props를 지정하지 않으면 React는 기본적으로 배열의 인덱스를 사용하여 요소를 식별한다.

이 경우 배열의 요소가 추가, 삭제, 이동 등 변경 될 때마다 React는 배열 요소의 인덱스를 다시 계산하고, 변경된 부분을 업데이트한다. 이 과정에서 각 요소가 리렌더링 되므로 성능상의 문제가 발생할 수 있다.

그렇기 때문에 key props의 값으로는 각 요소를 고유하게 식별할 수 있는 값을 사용한다. 

 

(본인은 실무에서 mongoDB의 ObjectId값으로 지정했었음)