💻 재조정(feat. 리액트 공식문서)

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

동기

React에서 state나 props가 갱신되면 render() 함수는 새로운 React 엘리먼트 트리를 반환한다. 이 때 React는 두 가지 가정을 기반하여 O(n) 복잡도의 휴리스틱 알고리즘으로 비교 연산을 수행한다.

1. 서로 다르타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
2. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다.

비교 알고리즘(Diffing Algorithm)

두 개의 트리를 비교할 때 React는 두 엘리먼트의 루트 엘리먼트부터 비교한다.

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

두 루트 엘리먼트의 타입이 다르면, React는 이전 트리를 버리고 완전히 새로운 트리를 구축한다.

// 바뀌기 전
<div>
  <Counter />
</div>

// 바뀐 후
<span>
  <Counter />
</span>

바뀌기 전, 후에 div에서 span으로 바뀌게 되면 트리 전체를 재구축하게 된다. 이전 Counter 컴포넌트는 사라지고 새로 다시 마운트된다. 트리를 버리게 되면 이전 DOM 노드들은 모두 파괴된다.

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

같은 타입의 두 React DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 갱신합니다.

// classNmae만 수정
<div className="before" title="stuff" />
<div className="after" title="stuff" />

// color 속성 style만 갱신
<div style={{color: 'red', fontWeight: 'bold'}} />
<div style={{color: 'green', fontWeight: 'bold'}} />

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

컴포넌트가 갱신되면 인스턴스는 동일하게 유지되어 렌더링 간 state가 유지된다.

자식에 대한 재귀적 처리

DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경한다.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

// 맨 앞에 <li>third</li>를 트리에 추가되면 성능이 좋지 않다.
<ul>
  <li>third</li>
  <li>first</li>
  <li>second</li>
</ul>

Keys

React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다.

<ul>
  <li key="1">first</li>
  <li key="2">second</li>
</ul>

// "3" key를 가진 엘리먼트는 이동만 하면 된다.
<ul>
  <li key="3">third</li>
  <li key="1">first</li>
  <li key="2">second</li>
</ul>

컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용된다.

고려사항

React는 항상 전체 앱을 재렌더링할 수 있지만 출력되는 결과는 항상 같다. 재렌더링은 모든 컴포넌트의 render()을 호출하는 것이지 React가 언마운트시키고 다시 마운트 하는 것이 아니다. 즉, 렌더링 전후에 변경된 부분만을 적용하는 것이다.

React는 휴리스틱에 의존하고 있기 때문에, 휴리스틱이 기반하고 있는 가정에 부합하지 않는 경우 성능이 나빠질 수 있다.

1. 알고리즘은 다른 컴포넌트 타입을 갖는 종속 트리들의 일치 여부를 확인하지 않는다.
2. key는 반드시 변하지 않고, 예상 가능하며, 유일해야한다.

🔥 느낀점

"재렌더링은 React가 언마운트 시키고 다시 언마운트 하는 것이 아니다." 렌더링 전후에 변경된 부분만을 적용하는 것이다!
이 개념이 잠깐 흐려졌던 것 같은데 확실히 알게되었다.

Refer

• 재조정- React 공식문서