리액트의 소스코드를 대략적으로 분석해보자 - 1

리액트 소스코드는 크게 세 부분으로 나뉩니다.

 

• React Core
  • Component
    • 리액트 컴포넌트의 기본동작을 구현
    • 컴포넌트의 state, props를 관리하고, 라이프사이클 메서드 제공
  • createElement
    • 가상 DOM 요소를 생성
    • JSX 문법 사용 시, 이 함수를 이용해서 가상 DOM 요소를 생성합니다.
  • diff algorithm
    • 가상 돔요소 변경을 비교하고, 변경된 부분만 실제 DOM에 반영합니다
• React Renderer
  • 실제 돔 렌더링 작업 수행
  • 리액트 코어와 분리, React DOM, React Native 등의 다양한 렌더러 제공
• React Reconciler
  • 가상돔 구현 후, 변경된 부분만 실제 DOM에 반영
  • React Renderer와 분리돼있으며, 리액트 코어와 함께 가상 돔 구현 알고리즘 등을 제공합니다.