재조정(Reconciliation)

[yjkwon07]

React 최적화
참고

• 렌더 단계에서 가상돔을 만들고 이전 가상돔과 비교하여 실제 돔에 업데이트한다.

  • 여기서 궁금한 점은 렌더 단계는 어디까지 렌더단계라고 칭하며
  • dev tools에 하이라이팅이 되는것은 가상돔을 만들었다는것일까? 아니면 실제 돔이 새로 만들어졌다는 의미일까?

• 재조정 방식

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

• 리액트에서 데이터 변경에 의한 화면 업데이트 렌더 단계와 커밋 단계를 거친다.

  • 렌더단계는 실제 돔에 반영할 변경 사항을 파악하는 단계
  • 커밋 단계는 파악된 변경 사항을 실제 돔에 반영하는 단계

• 렌더 단계는 컴포넌트 안에 있는 render함수를 호출하여 React.createEelement() 요소를 반환하여 트리 형태인 가상 돔을 만드는 과정을 렌더 단계라고 한다.

• 이 단계는 아직까지 실제 돔에 입력되지 않았다고 보면 된다.

• dev tool component에서 하이라이팅이 만들어지는것이 렌더 단계가 이루어 졌다고 보면 된다.

  • 여기서 하이라이팅이 실제 돔이 바뀌었다고 보면 안된다. => 가상 돔에서 업데이트 하기로 명령된 부분만 실제 돔에서 반영 된다. 비교 알고리즘 (Diffing Algorithm)
  • 하이라이팅은 단지 리액트 요소를 다시 그렸다는것을 보여주는 것이다.

재조정 알고리즘은 구현상의 세부사항이라는 것을 명심하세요. React는 항상 전체 앱을 재렌더링할 수도 있지만, 최종적으로 출력되는 결과는 항상 같을 것입니다. 좀 더 정확히 말하자면, 여기서 말하는 재렌더링은 모든 컴포넌트의 render를 호출하는 것이지 React가 언마운트시키고 다시 마운트하는 것은 아닙니다. 즉, 앞서 설명했던 규칙에 따라 렌더링 전후에 변경된 부분만을 적용할 것입니다.