[React] 리액트 요소가 돔 요소로 만들어지는 과정

이썸이·2024년 5월 15일
  • 리액트에서는 하나의 화면을 표현하기 위해 여러개의 리액트 요소가 트리구조로 구성됨

  • 리액트에서 데이터 변경에 의한 화면 업데이트는 렌더 단계(render phase, reconciliation phse=재조정)와 커밋 단계(commit phase)를 거침

    • 렌더 단계 : 실제 돔에 반영할 변경 사항을 파악하는 단계
      • 변경 사항을 파악하기 위해 가상돔 이용
    • 커밋 단계 : 파악된 변경 사항을 실제 돔에 반영하는 단게

가상돔

  • 리액트 요소로부터 만들어짐
  • 렌더링을 할 때마다 가상돔을 만들고 이전의 가상돔과 비교

리액트의 각 단계에서 호출되는 생명주기 메서드

0개의 댓글