[React 까보기] 1. 리액트 패키지의 구성 요소들 & 용어 정의

1️⃣ 구성 요소

• react 코어
  • 컴포넌트 정의
  • 다른 패키지에 의존성 X, 다양한 플랫폼(브라우저, 모바일)에 올려서 사용 가능
• renderer
  • react-dom, react-native-renderer 호스트(브라우저 or 모바일) 렌더링 환경에 의존
  • 호스트와 react를 연결 → 즉, 웹에서는 DOM 조작
  • reconciler 와 lagacy-events 패키지 에 의존
• event(legacy-event)
  • (아래 레퍼런스 react 공식문서 링크 참고)
  • SyntheticEvent 라는 이름의 내부적으로 개발된 이벤트 시스템
  • 기존 웹에서의 event를 wrapping 하여 추가적인 기능을 수행할 수 있게 함
• scheduler
  • 리액트는 Task를 비동기로 실행. 이 Task 를 실행하는 타이밍을 알고 있는 패키지
  • ex) state를 setState로 바꾼 후에 바로 state를 console 찍어보면 이전 state가 불러와짐
    → 즉, setState는 동기처럼 보이지만 실제 업데이트와 반영은 scheduler가 제어하는 비동기 작업(Task) 으로 실행됨
• reconciler
  • fiber 아키텍처에서 VDOM을 재조정
  • 컴포넌트를 호출하는 곳

2️⃣ 용어

• 렌더링
  • 컴포넌트를 호출하여 react element 를 return 받음 → VDOM 에 적용(재조정)하는 과정
  • 전체 과정
    1. 컴포넌트 호출 (return react element)
    2. VDOM 재조정 작업 (여기까지가 렌더링)
    3. renderer 가 컴포넌트 정보를 DOM에 삽입 (mount)
    4. 브라우저가 DOM을 paint
• React Element
  • 컴포넌트 호출시 return 하는 것 (JSX가 babel을 통해 react.createElement() 를 호출해서 리턴 받는 것)
  • 컴포넌트의 정보(DOM에 삽입될 내용 - type, key, props, ref 등의 정보)를 담은 객체
• Fiber 
  • VDOM 의 노드 객체 (아키텍처 이름과 동일함)
  • react element의 내용이 DOM에 반영되기 위해 먼저 VDOM에 추가되어야 하는데, 이를 위해 확장한 객체
    → 컴포넌트의 상태, 라이프 사이클, 훅을 더해 react element를 확장한 것

📚 레퍼런스

• https://ko.react.dev/reference/react-dom/components/common#react-event-object
• [React 까보기 시리즈] React 구성요소인 reconciler, renderer 등의 내부 패키지 & fiber, rendering 등의 용어 정의