BlogReactSharedReactTypes

Shared | ReactTypes (19.0.0)

react/packages/shared/ReactTypes.js
export type ReactNode = React$Element<any> | ReactPortal | ReactText | ReactFragment | ReactProvider<any> | ReactConsumer<any>;
 
export type ReactEmpty = null | void | boolean;
 
export type ReactFragment = ReactEmpty | Iterable<React$Node>;
 
export type ReactNodeList = ReactEmpty | React$Node;
 
export type ReactText = string | number;
 
export type ReactProvider<T> = {
  $$typeof: symbol | number,
  type: ReactContext<T>,
  key: null | string,
  ref: null,
  props: {
    value: T,
    children?: ReactNodeList,
  },
};
 
export type ReactConsumerType<T> = {
  $$typeof: symbol | number,
  _context: ReactContext<T>,
};
 
export type ReactConsumer<T> = {
  $$typeof: symbol | number,
  type: ReactConsumerType<T>,
  key: null | string,
  ref: null,
  props: {
    children: (value: T) => ReactNodeList,
  },
};
 
export type ReactContext<T> = {
  $$typeof: symbol | number,
  Consumer: ReactConsumerType<T>,
  Provider: ReactContext<T>,
  _currentValue: T,
  _currentValue2: T,
  _threadCount: number,
  _currentRenderer?: Object | null,
  _currentRenderer2?: Object | null,
  displayName?: string,
};
 
export type ReactPortal = {
  $$typeof: symbol | number,
  key: null | string,
  containerInfo: any,
  children: ReactNodeList,
  implementation: any,
};
 
export type RefObject = {
  current: any,
};
 
export type ReactScope = {
  $$typeof: symbol | number,
};
 
export type ReactScopeQuery = (
  type: string,
  props: {[string]: mixed},
  instance: mixed,
) => boolean;
 
export type ReactScopeInstance = {
  DO_NOT_USE_queryAllNodes(ReactScopeQuery): null | Array<Object>,
  DO_NOT_USE_queryFirstNode(ReactScopeQuery): null | Object,
  containsNode(Object): boolean,
  getChildContextValues: <T>(context: ReactContext<T>) => Array<T>,
};
 
export interface Wakeable {
  then(onFulfill: () => mixed, onReject: () => mixed): void | Wakeable;
}
 
interface ThenableImpl<T> {
  then(
    onFulfill: (value: T) => mixed,
    onReject: (error: mixed) => mixed,
  ): void | Wakeable;
}
 
interface UntrackedThenable<T> extends ThenableImpl<T> {
  status?: void;
  _debugInfo?: null | ReactDebugInfo;
}
 
export interface PendingThenable<T> extends ThenableImpl<T> {
  status: 'pending';
  _debugInfo?: null | ReactDebugInfo;
}
 
export interface FulfilledThenable<T> extends ThenableImpl<T> {
  status: 'fulfilled';
  value: T;
  _debugInfo?: null | ReactDebugInfo;
}
 
export interface RejectedThenable<T> extends ThenableImpl<T> {
  status: 'rejected';
  reason: mixed;
  _debugInfo?: null | ReactDebugInfo;
}
 
export type Thenable<T> =
  | UntrackedThenable<T>
  | PendingThenable<T>
  | FulfilledThenable<T>
  | RejectedThenable<T>;
 
export type OffscreenMode =
  | 'hidden'
  | 'unstable-defer-without-hiding'
  | 'visible'
  | 'manual';
 
export type StartTransitionOptions = {
  name?: string,
};
 
export type Usable<T> = Thenable<T> | ReactContext<T>;
 
export type ReactCustomFormAction = {
  name?: string,
  action?: string,
  encType?: string,
  method?: string,
  target?: string,
  data?: null | FormData,
};
 
export type ReactFormState<S, ReferenceId> = [
  S,
  string,
  ReferenceId,
  number,
];
 
export type Awaited<T> = T extends null | void
  ? T
  : T extends Object
    ? T extends {then(onfulfilled: infer F): any}
      ? F extends (value: infer V) => any
        ? Awaited<V>
        : empty
      : T 
    : T;
 
export type ReactCallSite = [
  string, 
  string,
  number,
  number,
];
 
export type ReactStackTrace = Array<ReactCallSite>;
 
export type ReactComponentInfo = {
  +name?: string,
  +env?: string,
  +key?: null | string,
  +owner?: null | ReactComponentInfo,
  +stack?: null | ReactStackTrace,
  +props?: null | {[name: string]: mixed},
  +debugStack?: null | Error,
  +debugTask?: null | ConsoleTask,
};
 
export type ReactAsyncInfo = {
  +started?: number,
  +completed?: number,
  +stack?: null | ReactStackTrace,
};
 
export type ReactDebugInfo = Array<ReactComponentInfo | ReactAsyncInfo>;

ReactNode

렌더링 가능한 모든 타입을 포함합니다.

  • ReactText string | number 타입을 갖습니다.
  • ReactEmpty: null | void | boolean 타입을 갖습니다.
  • ReactFragment: ReactEmpty 또는 Iterable<React$Node>, 비어 있거나 여러 React 노드의 반복 가능한 집합을 포함할 수 있습니다.
  • ReactNodeList: ReactEmpty 또는 React$Node, 비어 있거나 허용되는 모든 노드의 리스트를 의미합니다.
  • ReactContext: Context 값을 정의하며 _currentValue2, _threadCount 동시성 지원을 위한 property가 존재합니다.
  • ReactProvider: Context 제공자 역할을 하며 ref는 항상 null입니다.
  • ReactConsumer: Context 소비자 역할을 하며 ref는 항상 null입니다.
  • ReactPortal: 특정 DOM 위치에 렌더링할 containerInfo property가 존재합니다.

RefObject

  • 참조된 DOM 요소를 나타냅니다.

ReactScope

Component tree 내에서 특정 조건을 만족하는 요소들을 쉽게 찾고 조작할 수 있게 해주는 API입니다.

  • ReactScopeQuery: 검색 조건을 정의하는 함수입니다.
  • ReactScopeInstance: 실제 Scope 인스턴스로, 쿼리 메서드를 제공합니다.

Usable

Thenable<T>, ReactContext<T> 값을 갖습니다.

  • Wakeable: Suspense와 관련된 특수한 비동기 작업을 나타냅니다.
  • ThenableImpl: 비동기 작업의 결과를 처리하기 위한 인터페이스입니다. Wakeable를 반환할 수 있습니다.
  • UntrackedThenable: ThenableImpl<T>를 확장하며 상태 추적이 되지 않는 Thenable을 나타냅니다.
  • PendingThenable: ThenableImpl<T>를 확장하며 진행 중인 비동기 작업을 나타냅니다.
  • FulfilledThenable: ThenableImpl<T>를 확장하며 성공적으로 완료된 비동기 작업을 나타냅니다.
  • RejectedThenable: ThenableImpl<T>를 확장하며 실패한 비동기 작업을 나타냅니다.
  • Thenable: UntrackedThenable, PendingThenable, FulfilledThenable, RejectedThenable 다양한 상태의 비동기 작업을 표현하는 데 사용됩니다.

OffscreenMode

오프스크린 렌더링 모드를 정의합니다.

  • hidden: 컴포넌트 완전히 숨김
  • unstable-defer-without-hiding: 렌더링 지연 (실험적)
  • visible: 컴포넌트 보임
  • manual: 수동 제어 모드

StartTransitionOptions

startTransition의 이름을 정의합니다.

  • name: 디버깅, 모니터링용 이름 지정

ReactFormState

  • name: 폼 이름
  • action: 폼 제출 시 처리할 액션 URL
  • encType: 데이터 인코딩 타입
  • method: HTTP 메서드 (GET, POST 등)
  • target: 폼 제출 대상 윈도우/프레임
  • data: FormData 객체 또는 null

ReactCustomFormAction

서버와 클라이언트 간 폼 상태 공유를 위해 존재합니다.

  • S: 상태 값
  • string: 키 경로
  • string: 서버 참조 ID
  • number 바인딩된 인자 수

Awaited

비동기 값 추출을 위한 제네릭 타입입니다.

ReactDebugInfo

ReactComponentInfo 혹은 ReactAsyncInfo 배열입니다.

  • ReactCallSite: 배열 순서대로 함수 이름, 파일 이름, 행 번호, 열 번호를 갖습니다.
  • ReactStackTrace: ReactCallSite 배열입니다.
  • ReactComponentInfo: React 컴포넌트의 정보를 정의합니다.
  • ReactAsyncInfo: 비동기 관련 정보를 정의하며 started, completed 타임스탬프 값을 갖습니다.

참고 자료

React | shared