리액트 Reconciliation

state, props가 변경시 render함수가 실행되고 새로운 엘리먼트 트리를 반환한다.

이때 두개의 가정을통해 효과적으로 랜더링을 진행한다.

1. 엘리먼트의 타입이 다르다면 기존 엘리먼트를 폐기한다.

• 랜더링 조건에따라 <OldComponent/>=> <NewComponent>으로 바뀐다면 기존 엘리먼트를 폐기하고 새로 랜더링한다. 이때 OldComponent는 componentWillUnmount()을 실행하고 NewComponent 는 componentWillMount 을 실행한다.

2. 키를통해 새로 랜더링해야할지 판단한다.

• 재귀적 호출을통해 엘리먼트를 생성할경우 key값을 필수적으로 삽입하야여한다. 그렇지 않을 경우 새로운 엘리먼트가 추가될때 성능상에 좋지 않다. *랜덤값을 사용한다거나 재배열되는 리스트의 인덱스값을 사용할 경우 성능상 좋지않고 잘못된 결과가 랜더링될 수 있다.