2023-11-09 본 캠프 26일차 / 45일차 TIL (unique key message)

2023-11-09 본 캠프 26일차 / 45일차 TIL

주요 진행사항

- 알고리즘 문제풀이

- 리액트 숙련과정 강의 완강

- 리액트 유데미 강의 시청

동적 데이터 맵핑 시 key warning message

map 함수를 통한 동적데이터 맵핑시 key props를 추가하지 않았을 때 위와 같은 메세지가 뜨는 경우가 있다.

항상 의미를 모르고 key props를 추가하여 이 주의 메세지를 해결했었는데, 리액트 강의에서 해당 에러에 대한 내용이 있어 정리하였다.

key props가 없을 때 리액트은 어떻게 동작할까?

기존 맵핑의 기준이되는 배열이 변경 되었을 때 리액트에서는 어떤 항목이 추가되었는지 인식하지 못한다.

따라서 기존에 있던 맵핑된 요소를 삭제하고 변경된 요소가 업데이트 된 배열로 맵핑을 다시 실시한다.

따라서 위와 같이 동적으로 데이터를 추가했을 때 위와 같이 기존 맵핑된 요소도 리랜더링 되는 것을 볼 수 있다.

key props를 사용했을 때는 어떻게 동작할까?

리액트는 각각 매핑된 요소들이 고유한 값을 가진 key props를 사용하였기 때문에 비로소 각각의 요소를 인식할 수 있다. 따라서 동적으로 데이터가 변경되었을 때도 어떤데이터가 삭제되었고 어떤데이터가 추가되었는지 인식할 수 있다.

따라서 위와 같이 추가한 요소만 생성되는것을 볼 수 있다.

결론적으로 key props를 사용하는 것이 더 효율적인 리액트 프로그래밍을 위한 방법이라고 할 수 있다.

성능과도 연결이 되어있는 부분이니 의미를 알고 사용하면 되겠다.