본문 바로가기

공부기록/[강의노트] Udemy React 완벽가이드 1~100

# 70 [udemy React 완벽 가이드 노트] Keys에 대해

리액트는 데이터의 목록을 렌더링하는데 있어서 특별한 개념을 갖는데 

그 개념은 리액트가 발생할 수 있는 어떤 성능 손실이나 버그 없이 효과적으로

그런 목록을 업데이트하고 렌더링 하도록 존재한다.

 

새 목록을 DUMMY_EXPENSES로 추가할 때

가장 앞부분으로 추가하도록 했는데 

맨 밑부분이 깜박이면서 렌더링이 되는 것은 

 

맨 밑부분으로 추가한 후 기존에 있는 목록을 업데이트해서 

화면에 보이는대로 순서를 다시 바꾸어 준다. 

 

이 일을 하면 버그생성 가능성이 생기며 성능 저하의 원인이 될 수 있다. 

그리고 이 상황에서는 위와같은 워닝메시지를 보게 된다. 

 

리액트에게 어디에 아이템이 추가되어야 하는지 알려주기 위해 

key 속성을 추가해주어야 한다. 

 

key속성을 추가하면 각각의 아이템들을 인식해

어디에 위치해야 할지 인식하여 효율적으로 업데이트 하게 된다.