• 리액트 요소는 리액트 UI를 표현하는 수단

• 우리는 JSX문법을 사용하기 대문에 리액트 요소의 존재를 잘 모름

  • 하지만 리액트 요소를 이해하면 리액트가 내부적으로 어떻게 동작하는지 알 수 있다.

매커니즘

• 리액트 렌더링성능르 위해 '가상 돔'을 활용한다.

• 브라우저에서 돔을 변경하는 것은 비교적 오래 걸리는 작업

  • 따라서 빠른 렌더링을 위해서 돔변경을 최소화 해야 한다.
• 그래서 리액트는 리액트 요소로부터 가상돔을 만들어 메모리에 올려 놓고 이전과 이후의 가상 돔을 비교해서 변경된 부분만 실제 돔에 반영하는 전략을 채택

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

• 간략단계

  • JSX → [babel] → createElement함수호출결과 code → 리액트 요소 → [렌더링 단계] → 가상돔 → [커밋단계] → 실제 돔 변경
• 하나의 화면을 표현하기 위해 여러개의 리액트 요소가 트리 구조로 구성

• 리액트에서 데이터 변경에 의한 화면 업데이트는 '렌더단계(render phase)', '커밋단계(commit phase)'를 거친다

  • 단계별 설명

    • 렌더단계

      • 실제 돔에 반영할 변경 사항을 파악하는 단계
      • ReactDom.render 함수와 setState 메서드에 의해서 시작된다.

    • 커밋단계

      • 파악된 변경사항을 실제 돔에 반영하는 단계
  • 변경 사항을 파악하기 위해 '가상 돔'을 이용한다.

• 과정 정리

  • ReactDOM.render 함수가 호출되고 최초의 렌더 단계가 실행

    • 가상 돔이 실제 돔으로 만들어 졌다.
    • 클래스형 컴포넌트는 인스턴스로 만들어지고 리액트 내부에서 관리된다.

  • 만약 상탯값이 변견되면 두번째 렌더가 실행되고 새로운 가상 돔이 만들어진다.

    • 이때 이전 가상 돔과 비교해 변경된 부분만 돔에 반영

• 리액트 요소는 파이버(fiber)라는 구조체로 변환

  • 리액트16부터 도입된 구조체
  • 파이버도 리액트 요소와 같이 type,props 속성값을 갖는다.
  • 바이버로 동작할 때도 모든 type 속성값이 문자열이 될 때까지 연산한다