리액트는 데이터의 목록을 렌더링하는데 있어서 특별한 개념을 갖는데
그 개념은 리액트가 발생할 수 있는 어떤 성능 손실이나 버그 없이 효과적으로
그런 목록을 업데이트하고 렌더링 하도록 존재한다.
새 목록을 DUMMY_EXPENSES로 추가할 때
가장 앞부분으로 추가하도록 했는데
맨 밑부분이 깜박이면서 렌더링이 되는 것은
맨 밑부분으로 추가한 후 기존에 있는 목록을 업데이트해서
화면에 보이는대로 순서를 다시 바꾸어 준다.
이 일을 하면 버그생성 가능성이 생기며 성능 저하의 원인이 될 수 있다.

그리고 이 상황에서는 위와같은 워닝메시지를 보게 된다.
리액트에게 어디에 아이템이 추가되어야 하는지 알려주기 위해
key 속성을 추가해주어야 한다.
key속성을 추가하면 각각의 아이템들을 인식해
어디에 위치해야 할지 인식하여 효율적으로 업데이트 하게 된다.
'공부기록 > [강의노트] Udemy React 완벽가이드 1~100' 카테고리의 다른 글
# 88 [udemy React 완벽 가이드 노트] CSS모듈 사용하기 (0) | 2022.09.11 |
---|---|
# 69 [udemy React 완벽 가이드 노트] map 함수를 이용해 expense배열 자동 업데이트 되게 만들기 (0) | 2022.09.10 |
# 65 [udemy React 완벽 가이드 노트] 스테이트리스와 스테이트풀 컴포넌트 (0) | 2022.09.10 |
# 62 [udemy React 완벽 가이드 노트] 스테이트 끌어올리기 (0) | 2022.09.10 |
# 61 [udemy React 완벽 가이드 노트] 자식 컴포넌트의 값을 부모에게 전달하기 (0) | 2022.09.10 |