React 용어정리

React 18 공식문서

React 구성요소인 reconciler, renderer 등의 내부 패키지 & fiber, rendering 등의 용어 정의

React 구성요소

React Package
component 정의
다른 패키지에 의존성이 없으므로 다양한 플랫폼(브라우저, 모바일)에 올려서 사용 가능
React Library의 react package는 UI Component & 상태관리 담당

플랫폼(브라우저 / 모바일)에 대한 렌더링은 다른 패키지인 react-dom, react-native가 수행한다.

export {
 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
 act as unstable_act,
 Children,
 Component,
 Fragment,
 Profiler,
 PureComponent,
 StrictMode,
 Suspense,
 cloneElement,
 createContext,
 createElement,
 createFactory,
 createRef,
 createServerContext,
 use,
 forwardRef,
 isValidElement,
 lazy,
 memo,
 cache,
 ... ,
 useId,
 useCallback,
 useContext,
 useDebugValue,
 useDeferredValue,
 useEffect,
 experimental_useEffectEvent,
 useImperativeHandle,
 useInsertionEffect,
 useLayoutEffect,
 useMemo,
 useOptimistic,
 useSyncExternalStore,
 useReducer,
 useRef,
 useState,
 useTransition,
 version,
} from 'React';

---

renderer(컴포넌트를 브라우저에 올리는 역활 - mount)
react-dom, react-native-render 등의 호스트(플랫폼) 렌더링 환경에 의존
호스트(플랫폼)와 react를 연결
reconciler & legacy-events 패키지 의존성

React의 렌더링 과정이 끝난 후 virtual DOM이 완성되면 이를 실제 DOM에 적용시켜야 하는데 renderer가 가상 DOM에서 실제 DOM으로 적용시키는 역할을 한다.

ReactDOM.render(<App />, document.getElementById('root'));

---

event(legacy-events)
리액트 event 관련 문서

React에서 제공하는 SyntheticEvent는 브라우저의 네이티브 이벤트를 추상화한 이벤트 객체입니다.
기존 웹에서의 event를 Wrapping 추가적인 기능 수행

native event - 브라우저에서 제공하는 기본 이벤트(Click, hover submit, etc)

브라우저마다 native event를 처리하는 과정이 다르기 때문에 개발자가 일일이 신경쓰지 않고 SytheticEvent 객체를 활용한다.
호스트 이벤트 래핑(wrapping)은 React에서 네이티브 브라우저 이벤트를 SyntheticEvent 객체로 감싸는 과정을 말합니다. wrapping을 함으로써 크로스 브라우저에서 발생하는 event를 일관되게 처리할 수 있다.

---

scheduler

react는 여러가지 이유(버튼을 클릭하면 새로운 페이지로 이동해 데이터를 불러와야하는 경우)로 작업을 비동기로 실행시켜야 한다. 이러한 작업들의 단위를 Task라 칭하며 scheduler는 우선순위가 높은 Task를 먼저 실행시킨다.

---

reconciler

fiber architecture에서 virtual DOM 재조정 담당 컴포넌트를 호출하는 곳

fiber(섬유) react 16+버전에서 기존의 react virtual DOM 개선하기 위해 만든 자료구조이다.

Stack Reconciler의 문제점
1. 트리의 업데이트를 한꺼번에 처리 -> task로 나눠서 여러 프레임에 나누어 처리
2. 우선순위가 존재x -> update에 대한 우선순위가 존재
3. 두 currentTree & workInProgressTree 비교 diff Algorithm을 이용 재귀를 통해서 변동 사항을 찾는데, 이 때 call stack에서 재귀를 하는 동안 다른 event를 처리할 수 없음.
(event loop는 timer function, native event, animation, etc)
-> 이런 순회 작업을 멈출 수도 있고, 재개할 수도 있고, 필요에 따라서는 그냥 내다버릴 수도 있게 만듦. 더 나아가 우선순위에 따라 이것을 처리함으로써, 더욱 똑똑하게 렌더링을 구현
추후 더 넣을 예정.

---

용어 정리

• 컴포넌트(component)
  Static component : 자체 제공하는 component(Fragment, Memo, StrictMode)

	import React, { Fragment } from 'react';

	function Example() {
      return (
        <Fragment>
          <ChildA />
          <ChildB />
        </Fragment>
      );
  }

Host component : 플랫폼(브라우저 & 앱) component
(div, span, a, etc)

function Example() {
  return <div>Hello, world!</div>;
}

Custom component : 사용자 정의 component
개발자가 직접 정의한 컴포넌트 / 우리가 제일 많이 쓰는 컴포넌트

function CustomButton({ label }) {
  return <button className="custom-button">{label}</button>;
}

• 렌더링(rendering)
  reconciler가 컴포넌트를 호출해 virtual Tree인 progressInTree에 업데이트(rendering) -> diff algorithm을 이용하여 두 virtual Tree 비교 -> 변동사항이 존재하면 renderer를 이용하여 DOM에 적용(mount) -> DOM을 이용하여 브라우저에 나타남(Paint)

• Virtual DOM
  react는 더블 버퍼링 형태로 VDOM을 설계
  current DOM - 마운트(react component가 호출이 종료된 후 DOM에 적용)가 끝난 트리
  **workInProgress - 업데이트가 적용된 트리

• reactElement
  컴포넌트의 정보를 담은 모델 객체. 컴포넌트가 반환하는 것은 JSX가 아닌 이 React element입니다. JSX는 단지 개발자가 쓰기 편한 문법적 표현으로, 실제 React 애플리케이션에서는 ReactElement가 중요한 역할을 합니다. Babel Transfiler가 JSX -> ReactElement로 변환

// jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Jiseung" />;

// react element(transfile)
function Welcome(props) {
  return React.createElement("h1", null, "Hello, ", props.name);
}

const element = React.createElement(Welcome, { name: "Jiseung" });

• fiber
  VDOM의 노드 객체입니다. 이 객체는 React element를 VDOM에 올리기 위해 확장한 객체입니다.

React fiber Scheduling은 CPU Scheduling Algorithm에서 round robin + priority scheduling을 합친 scheduling이라고 생각하면 편함. Task로 나눠 일정 시간동안 진행되면서 브라우저의 메인 스레드를 blocking x. 그러면서 선점형 스케쥴링으로서 우선순위가 높은 게 들어오면 먼저 처리.

참조

리엑트 톺아보기 - 1
React 톺아보기 - 01. Preview