재조정(Reconciliation)

리액트 비교 알고리즘

O(n) 복잡도의 휴리스틱 알고리즘를 사용.

두개의 트리를 비교할 때, 두개의 루트 엘리먼트부터 비교.

엘리먼트의 타입이 다른 경우

• 완전히 새로운 트리를 구축

ex) a => img, Button => div

• 생애주기

1. componentWillUnmount() 실행
2. UNSAFE_componentWillMount() 실행
3. componentDidMount() 실행

DOM 엘리먼트의 타입이 같은 경우

• 동일한 내역은 유지하고 변경된 속성들만 갱신

• 아래와 같이 className만 변경되면 리액트는 DOM 노드의 className만 수정한다

<div className="before" title="stuff" />

<div className="after" title="stuff" />

같은 타입의 컴포넌트 엘리먼트

컴포넌트가 갱신되면 렌더링 state는 유지된다

• 생애주기

1. 현재 컴포넌트의 props를 갱신

2. UNSAFE_componentWillReceiveProps()

3. UNSAFE_componentWillUpdate()

4. componentDidUpdate

자식 컴포넌트에 Key를 줄때 유의사항

• 전역에서 유일할 필요는 없다. 형제사이에서 유일하면 된다.

• 최후의 수단으로 index를 key로 사용하는데 항목들이 재배열되면 엉키게 되므로 재배열이 되지 않을때만 index를 key로 사용하자.

주의사항

1. 매우 비슷한 결과물을 출력하는 두 컴포넌트를 교체하고 있다면, 그 둘을 같은 타입으로 만드는 것이 더 나을 수도 있습니다.

2. key는 변하지 않고, 예상 가능하며, 유일해야 합니다.

https://velog.io/@naamoonoo/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%A0%EA%B9%8C-Diffing-3%EC%A3%BC%EC%B0%A8-%ED%9A%8C%EA%B3%A0#%EC%82%AC%EC%8B%A4%EC%9D%B4%EB%9D%BC%EA%B3%A0-%EC%93%B0%EA%B3%A0-%EB%B3%80%EB%AA%85%EC%9D%B4%EB%9D%BC%EA%B3%A0-%EC%9D%BD%EB%8A%94%EB%8B%A4