React - List Key의 중요성

이유

보통 key를 index에 의존하는 경우가 많은데 이건 큰 이슈를 불러이르킨다.

list 추가 삭제할 때
추가 및 삭제 할 때 리스트의 고유 키가 변경되면서 리스트의 모든 요소가 다시 만들어 진다.
이로 인하여 성능 최적화가 안된다.

key가 잘 설정 되어 있다면 추가 및 삭제 시 해당되는 요소만 UI에 반영된다는 걸 브라우저 콘솔에서 확인 할 수 있다.

list 안에 어떤 state 값이 존재 할 때
리스트가 index 기준으로 나열 되어 있고 첫번째 요소 안에 input value가 있다고 가정해보자.
요소가 첫번째에 추가되면 input value가 두번째가 아니라 첫번째에 저장되어 있다.

debugging도 안되기에 이유를 찾기 싶지 않을 것이다.

존재 이유

기본적으로 브라우저는 DOM을 업데이트하기 위해서 수 많은 일들을 최소화하기 위함

DOM 업데이트 과정
  1. 변경될 요소를 찾는다.
  2. 찾은 요소와 자식 요소를 제거
  3. 새로운 요소를 추가
  4. CSS 계산
  5. Layout정보를 알맞게 수정

 

요소가 tree로 저장되어 있어서 탐색과 추가 및 삭제는 빠르게 진행된다.
하지만 브라우저에 새롭게 그려주는 작업은 꽤나 복잡하다.
N가 수정되면 N번 브라우저를 새롭게 그러주는 작업을 해줘야 해서 비효율적이다.

특징
리엑트는 항상 두개의 virtual dom을 갖고 있다.
첫번째는 변경 이전의 내용을 담고 있고, 두번째는 변경 이후에 보여일 내용을 담고 있다.

Diffing
state가 변경될 때 마다 리엑트는 새롭게 UI를 그림

state가 변경된 내용을 담고 있는 virtual dom이 있고,
UI에 노출된 정보를 가지고 있는 virtual dom이 있음.

둘이 비교해서 어느 요소가 변경되었는지 확인

Reconciliation
Diffing을 통해 변경된 요소만 Batch Update를 이용해서 실제 브라우저에 적용 시킴
즉, 변경된 요소가 여러개 있을 때 한번에 변경시킴 (화면에 그려주는 작업을 여기서 최소화)

참고
https://youtu.be/QC3PtSlzp3s