React (리액트) Fast Refresh (패스트 리프레시): 차세대 핫 리로딩 완벽 해부

React (리액트) Fast Refresh (패스트 리프레시): 차세대 핫 리로딩 완벽 해부

머리말

먼저, Live Reloading (라이브 리로딩)과 Hot Reloading (핫 리로딩)의 차이점을 소개하겠습니다.

Live Reloading (라이브 리로딩): 파일이 수정되면 Webpack (웹팩)이 이를 다시 컴파일하고 브라우저를 강제로 새로고침합니다.

이는 전역 새로고침(애플리케이션 전체)을 초래하며, window.location.reload() (윈도우 점 로케이션 점 리로드)와 동일합니다.


Hot Reloading (핫 리로딩): 파일이 수정되면 Webpack (웹팩)이 해당 모듈을 다시 컴파일하지만, 새로고침 시 애플리케이션의 상태를 유지하여 부분적인 새로고침이 가능합니다.

소개

Fast Refresh (패스트 리프레시)는 React (리액트)가 React Native (리액트 네이티브) (v0.6.1)를 위해 도입한 공식 Hot Module Replacement (HMR, 핫 모듈 교체) 솔루션입니다.

핵심 구현이 플랫폼에 독립적이기 때문에 Fast Refresh (패스트 리프레시)는 웹에서도 적용 가능합니다.

새로고침 전략

React (리액트) 컴포넌트만 내보내는 모듈 파일을 편집하면, Fast Refresh (패스트 리프레시)는 해당 모듈의 코드만 업데이트하고 컴포넌트를 다시 렌더링합니다.

스타일, 렌더링 로직, 이벤트 핸들러 또는 효과를 포함하여 파일 내의 모든 것을 편집할 수 있습니다.


모듈이 React (리액트) 컴포넌트를 내보내지 않으면, Fast Refresh (패스트 리프레시)는 해당 모듈과 이를 가져오는 모든 모듈을 다시 실행합니다.

예를 들어, Button.js (버튼 점 제이에스)와 Modal.js (모달 점 제이에스)가 모두 Theme.js (테마 점 제이에스)를 가져오는 경우, Theme.js (테마 점 제이에스)를 편집하면 Button.js (버튼 점 제이에스)와 Modal.js (모달 점 제이에스)가 모두 업데이트됩니다.


마지막으로, 편집한 파일이 React (리액트) 렌더링 트리 외부의 모듈에서만 가져오는 경우, Fast Refresh (패스트 리프레시)는 전체 새로고침으로 대체됩니다.

이는 파일이 React (리액트) 컴포넌트를 렌더링하고 비 React (리액트) 모듈에서 사용하는 값을 내보내는 경우 발생할 수 있습니다.

예를 들어, React (리액트) 컴포넌트 모듈이 상수를 내보내고 비 React (리액트) 모듈이 이를 가져오면 Fast Refresh (패스트 리프레시)는 파일을 단독으로 업데이트할 수 없습니다.

이런 경우에는 내보낸 값을 별도의 파일로 옮기고 두 모듈 모두에서 가져오는 것을 고려하십시오.

이렇게 하면 Fast Refresh (패스트 리프레시)가 올바르게 작동할 수 있습니다.

오류 처리

Fast Refresh (패스트 리프레시) 중에 구문 오류가 발생하면 오류를 수정하고 파일을 다시 저장할 수 있습니다.

빨간색 오류 화면이 사라집니다.

결함이 있는 모듈은 실행이 차단되므로 앱을 다시 로드할 필요가 없습니다.


모듈 초기화 중에 런타임 오류가 발생하면 (예: 실수로 StyleSheet.create (스타일시트 점 크리에이트) 대신 Style.create (스타일 점 크리에이트)를 작성한 경우) 오류를 수정하면 Fast Refresh (패스트 리프레시) 세션이 계속됩니다.

오류 화면이 사라지고 모듈이 업데이트됩니다.


컴포넌트 내부에서 런타임 오류가 발생하면 오류를 수정해도 Fast Refresh (패스트 리프레시) 세션이 다시 시작됩니다.

이 경우 React (리액트)는 업데이트된 코드를 사용하여 컴포넌트를 다시 마운트합니다.


오류가 발생한 컴포넌트가 오류 경계(error boundary) 내부에 있으면 오류를 수정하면 Fast Refresh (패스트 리프레시)가 오류 경계 내의 모든 노드를 다시 렌더링합니다.

제한 사항

파일을 편집할 때 Fast Refresh (패스트 리프레시)는 안전한 경우 컴포넌트 상태를 유지합니다.

그러나 다음 경우에는 파일 편집 후 상태가 재설정됩니다.

클래스 컴포넌트의 로컬 상태는 유지되지 않습니다 (함수형 컴포넌트와 Hooks (훅)의 상태만 유지됨).


편집하는 모듈이 React (리액트) 컴포넌트 이외의 것을 내보내는 경우.


때때로 모듈은 createNavigationContainer(MyScreen) (크리에이트네비게이션컨테이너 마이스크린)과 같은 고차 컴포넌트(HOC)를 내보냅니다.

반환된 컴포넌트가 클래스 컴포넌트이면 상태가 재설정됩니다.


함수형 컴포넌트와 Hooks (훅)가 점점 더 보편화됨에 따라 Fast Refresh (패스트 리프레시)를 사용한 편집 환경은 계속 개선될 것입니다.

팁

기본적으로 Fast Refresh (패스트 리프레시)는 함수형 컴포넌트와 Hooks (훅)의 상태를 유지합니다.


마운트 시에만 실행되는 애니메이션을 디버깅하는 경우 모든 편집 시 전체 재마운트를 강제하고 싶을 수 있습니다.

이렇게 하려면 파일 어디든 // @refresh reset (슬래시 슬래시 골뱅이 리프레시 리셋)을 추가하십시오.

이 지시문은 편집할 때마다 해당 파일에 정의된 컴포넌트를 Fast Refresh (패스트 리프레시)가 강제로 재마운트하도록 합니다.

Fast Refresh (패스트 리프레시)에서의 Hooks (훅) 동작

Fast Refresh (패스트 리프레시)는 편집 중 컴포넌트 상태를 유지하려고 합니다.

특히, useState (유즈스테이트)와 useRef (유즈레프)는 다음과 같은 조건 하에 이전 값을 유지합니다.

매개변수를 변경하지 않는 경우.


Hook (훅) 호출 순서를 변경하지 않는 경우.


useEffect (유즈이펙트), useMemo (유즈메모), useCallback (유즈콜백)과 같이 의존성을 가진 Hooks (훅)는 의존성 목록을 무시하고 Fast Refresh (패스트 리프레시) 중에 항상 다시 실행됩니다.

예를 들어, 다음을 변경하는 경우:

useMemo(() => x * 2, [x]);

다음과 같이 변경합니다.

useMemo(() => x * 10, [x]);

x가 변경되지 않더라도 팩토리 함수는 다시 실행됩니다.

이러한 동작이 없으면 변경 사항이 UI에 반영되지 않습니다.

이 메커니즘은 때때로 예기치 않은 동작을 유발할 수 있습니다.

예를 들어, useEffect (유즈이펙트) 의존성 배열이 비어 있더라도 Fast Refresh (패스트 리프레시)는 여전히 효과를 한 번 다시 실행합니다.

그러나 일반적으로 useEffect (유즈이펙트) 훅을 가끔 다시 실행될 수 있도록 작성하는 것이 좋으며, 이렇게 하면 나중에 새로운 의존성을 쉽게 도입할 수 있습니다.

구현 세부 정보

HMR (핫 모듈 교체) (모듈 수준) 및 React Hot Loader (리액트 핫 로더) (제한된 컴포넌트 수준)보다 더 세분화된 업데이트를 달성하려면 컴포넌트 수준 및 Hooks (훅) 수준의 안정적인 업데이트를 지원해야 합니다.

이를 위해서는 외부 메커니즘(예: 런타임 패치 또는 컴파일 타임 변환)만으로는 충분하지 않으므로 React (리액트)와의 긴밀한 통합이 필요합니다.

Fast Refresh (패스트 리프레시)는 React (리액트)의 완전한 지원을 받는 "핫 리로딩"의 재구현입니다.

이는 이전에 피할 수 없었던 문제(예: Hooks (훅) 처리)를 이제 React (리액트)의 협력을 통해 해결할 수 있음을 의미합니다.

핵심적으로 Fast Refresh (패스트 리프레시)는 여전히 HMR (핫 모듈 교체)에 의존하며 다음과 같은 계층을 갖습니다.

HMR (핫 모듈 교체) 메커니즘 (예: Webpack HMR (웹팩 에이치엠알))


컴파일 타임 변환 (react-refresh/babel (리액트-리프레시/바벨))


런타임 향상 (react-refresh/runtime (리액트-리프레시/런타임))


React (리액트) 내장 지원 (React DOM (리액트 돔) 16.9+ 또는 react-reconciler (리액트-리콘사일러) 0.21.0+)


프록시 컴포넌트를 사용하는 React Hot Loader (리액트 핫 로더)와 달리 Fast Refresh (패스트 리프레시)는 React (리액트)가 이제 함수형 컴포넌트와 Hooks (훅)에 대한 핫 교체를 기본적으로 지원하므로 이 계층을 제거합니다.

과정

 

Fast Refresh (패스트 리프레시)는 react-refresh (리액트-리프레시) 패키지 내에서 유지 관리되는 두 부분으로 구성됩니다.

Babel (바벨) 플러그인 (react-refresh/babel (리액트-리프레시/바벨))


런타임 (react-refresh/runtime (리액트-리프레시/런타임))


이러한 기능은 다른 진입점을 통해 노출됩니다.

Fast Refresh (패스트 리프레시)의 구현을 네 가지 주요 측면으로 나눌 수 있습니다.

Babel (바벨) 플러그인은 컴파일 타임에 무엇을 합니까?


런타임은 실행 시간에 어떻게 작동합니까?


React (리액트)는 이를 위해 어떤 특정 지원을 제공합니까?


이 메커니즘은 HMR (핫 모듈 교체)과 어떻게 통합됩니까?

1. Babel (바벨) 플러그인은 컴파일 타임에 무엇을 합니까?

높은 수준에서 Fast Refresh (패스트 리프레시)의 Babel (바벨) 플러그인은 코드의 모든 컴포넌트와 사용자 정의 Hooks (훅)를 감지하고 컴포넌트를 등록하고 Hook (훅) 서명을 수집하기 위한 함수 호출을 삽입합니다.

변환 전

function useFancyState() {
  const [foo, setFoo] = React.useState(0);
  useFancyEffect();
  return foo;
}

const useFancyEffect = () => {
  React.useEffect(() => {});
};

export default function App() {
  const bar = useFancyState();
  return <h1>{bar}</h1>;
}

변환 후

var _s = $RefreshSig$(), // Hook 서명 수집 함수
  _s2 = $RefreshSig$(),
  _s3 = $RefreshSig$();

function useFancyState() {
  _s(); // Hook 사용 시작 알림
  const [foo, setFoo] = React.useState(0);
  useFancyEffect();
  return foo;
}

// useFancyState의 서명 정보 등록
_s(useFancyState, 'useState{ct{}', false, function () {
  return [useFancyEffect]; // 의존하는 커스텀 Hook
});

const useFancyEffect = () => {
  _s2(); // Hook 사용 시작 알림
  React.useEffect(() => {});
};

// useFancyEffect의 서명 정보 등록
_s2(useFancyEffect, 'useEffect{}');

export default function App() {
  _s3(); // Hook 사용 시작 알림
  const bar = useFancyState();
  return <h1>{bar}</h1>;
}

// App 컴포넌트의 서명 정보 등록
_s3(App, 'useFancyState{bar}', false, function () {
  return [useFancyState]; // 의존하는 커스텀 Hook
});

_c = App; // 컴포넌트 참조 저장
var _c;
$RefreshReg$(_c, 'App'); // App 컴포넌트 등록

_s와 _s2 함수는 Hook (훅) 서명을 수집하고, $RefreshReg$ (달러리프레시레그)는 Fast Refresh (패스트 리프레시)를 위해 컴포넌트를 등록합니다.

2. 런타임은 실행 시간에 어떻게 작동합니까?

변환된 코드에서 Babel (바벨) 플러그인이 주입한 두 개의 정의되지 않은 함수를 발견할 수 있습니다.

$RefreshSig$ (달러리프레시시그): 사용자 정의 Hook (훅) 서명을 수집합니다.


$RefreshReg$ (달러리프레시레그): 컴포넌트를 등록합니다.


이러한 함수는 react-refresh/runtime (리액트-리프레시/런타임)에서 제공됩니다.

일반적인 설정은 다음과 같습니다.

var RefreshRuntime = require('react-refresh/runtime'); // react-refresh/runtime 모듈을 가져옵니다.

// 전역 $RefreshReg$ 함수를 정의합니다.
// type: 컴포넌트 타입, id: 컴포넌트 식별자
window.$RefreshReg$ = (type, id) => {
  // 참고: `module.id`는 Webpack 관련이며, 다른 번들러는 다른 식별자를 사용할 수 있습니다.
  const fullId = module.id + ' ' + id; // 전체 식별자를 생성합니다.
  RefreshRuntime.register(type, fullId); // RefreshRuntime에 컴포넌트를 등록합니다.
};

// 전역 $RefreshSig$ 함수를 RefreshRuntime의 collectCustomHooksForSignature로 설정합니다.
window.$RefreshSig$ = RefreshRuntime.collectCustomHooksForSignature;

React Refresh Runtime (리액트 리프레시 런타임) API에 매핑되는 방식은 다음과 같습니다.

createSignatureFunctionForTransform (크리에이트시그니처펑션포트랜스폼): Hook (훅) 서명 정보를 추적합니다.


register (레지스터): 참조(타입)를 고유 ID(아이디)에 매핑하여 컴포넌트를 등록합니다.

createSignatureFunctionForTransform (크리에이트시그니처펑션포트랜스폼) 작동 방식

createSignatureFunctionForTransform (크리에이트시그니처펑션포트랜스폼) 함수는 세 단계로 Hook (훅) 사용을 추적합니다.

초기 단계: 함수 서명을 해당 컴포넌트와 연결합니다.


Hook (훅) 수집 단계: 컴포넌트에서 사용되는 사용자 정의 Hooks (훅)에 대한 정보를 수집합니다.


해결된 단계: 세 번째 호출 후 추가 변경 사항 기록을 중지합니다 (불필요한 오버헤드 방지).

// 변환을 위한 시그니처 함수를 생성합니다.
export function createSignatureFunctionForTransform() {
  let savedType; // 저장된 타입
  let hasCustomHooks; // 커스텀 Hook 존재 여부
  let didCollectHooks = false; // Hook 수집 완료 여부

  return function <T>(
    type: T, // 컴포넌트 또는 Hook 타입
    key: string, // 서명 키
    forceReset?: boolean, // 강제 리셋 여부
    getCustomHooks?: () => Array<Function> // 커스텀 Hook 목록을 반환하는 함수
  ): T | void {
    if (typeof key === 'string') { // 키가 문자열인 경우 (첫 번째 또는 두 번째 호출)
      if (!savedType) { // 저장된 타입이 없으면 (첫 번째 호출)
        savedType = type;
        hasCustomHooks = typeof getCustomHooks === 'function';
      }
      // 타입이 유효하고 함수 또는 객체인 경우 서명을 설정합니다.
      if (type != null && (typeof type === 'function' || typeof type === 'object')) {
        setSignature(type, key, forceReset, getCustomHooks);
      }
      return type;
    } else { // 키가 문자열이 아닌 경우 (세 번째 호출, Hook 수집 단계)
      if (!didCollectHooks && hasCustomHooks) { // 아직 Hook을 수집하지 않았고 커스텀 Hook이 있는 경우
        didCollectHooks = true;
        collectCustomHooksForSignature(savedType); // 저장된 타입에 대한 커스텀 Hook 서명을 수집합니다.
      }
    }
  };
}

register (레지스터) 작동 방식

register (레지스터) 함수는 컴포넌트 업데이트를 추적합니다.

// 컴포넌트를 등록하고 업데이트를 추적합니다.
export function register(type: any, id: string): void {
  let family = allFamiliesByID.get(id); // ID로 패밀리를 조회합니다.
  if (family === undefined) { // 패밀리가 등록되지 않은 경우
    family = { current: type }; // 새로운 패밀리를 생성합니다.
    allFamiliesByID.set(id, family); // ID로 패밀리를 등록합니다.
  } else { // 패밀리가 이미 등록된 경우 (업데이트)
    pendingUpdates.push([family, type]); // 보류 중인 업데이트 목록에 추가합니다.
  }
  allFamiliesByType.set(type, family); // 타입으로 패밀리를 등록합니다.
}

다음과 같은 일이 발생합니다.

컴포넌트가 아직 등록되지 않은 경우 전역 컴포넌트 레지스트리(allFamiliesByID (올패밀리즈바이아이디))에 추가됩니다.


컴포넌트가 이미 존재하는 경우 보류 중인 업데이트 대기열(pendingUpdates (펜딩업데이트))에 추가됩니다.


보류 중인 업데이트는 나중에 Fast Refresh (패스트 리프레시)가 실행될 때 처리됩니다.


업데이트가 적용되면 performReactRefresh (퍼폼리액트리프레시)는 보류 중인 업데이트를 활성 업데이트 테이블(updatedFamiliesByType (업데이트패밀리즈바이타입))로 이동하여 React (리액트)가 함수 및 컴포넌트의 최신 버전을 조회할 수 있도록 합니다.

// 주어진 타입에 대한 패밀리를 해결합니다.
function resolveFamily(type) {
  return updatedFamiliesByType.get(type); // 업데이트된 패밀리 맵에서 타입을 조회합니다.
}

3. React (리액트)는 Fast Refresh (패스트 리프레시)를 위해 어떤 지원을 제공합니까?

React (리액트) 런타임은 Fast Refresh (패스트 리프레시) 통합을 위해 여러 함수를 제공합니다.

// react-reconciler/src/ReactFiberHotReloading에서 가져온 타입 정의
import type {
  Family, // 패밀리 타입
  RefreshUpdate, // 리프레시 업데이트 타입
  ScheduleRefresh, // 리프레시 스케줄 함수 타입
  ScheduleRoot, // 루트 스케줄 함수 타입
  FindHostInstancesForRefresh, // 리프레시를 위한 호스트 인스턴스 찾기 함수 타입
  SetRefreshHandler, // 리프레시 핸들러 설정 함수 타입
} from 'react-reconciler/src/ReactFiberHotReloading';

한 가지 주요 함수는 setRefreshHandler (셋리프레시핸들러)로, Fast Refresh (패스트 리프레시)를 React (리액트)의 조정 프로세스에 연결합니다.

// 리프레시 핸들러를 설정합니다.
export const setRefreshHandler = (handler: RefreshHandler | null): void => {
  if (__DEV__) { // 개발 모드에서만 실행됩니다.
    resolveFamily = handler; // 전역 resolveFamily 변수에 핸들러를 할당합니다.
  }
};

Fast Refresh (패스트 리프레시)가 React (리액트) 업데이트를 트리거하는 방법

Fast Refresh (패스트 리프레시)가 업데이트를 감지하면 다음을 수행합니다.

업데이트 테이블(updatedFamilies (업데이트패밀리즈))을 React (리액트)에 전달합니다.


scheduleRefresh (스케줄리프레시) 및 scheduleRoot (스케줄루트)를 사용하여 React (리액트) 업데이트를 트리거합니다.

// React 리프레시를 수행합니다.
export function performReactRefresh(): RefreshUpdate | null {
  const update: RefreshUpdate = {
    updatedFamilies, // 상태를 유지하면서 다시 렌더링될 컴포넌트들
    staleFamilies, // 다시 마운트되어야 하는 컴포넌트들
  };

  // 각 렌더러 ID에 대해 헬퍼 함수를 가져와 리프레시 핸들러를 설정합니다.
  helpersByRendererID.forEach((helpers) => {
    helpers.setRefreshHandler(resolveFamily);
  });

  // 실패한 루트 스냅샷에 대해 루트를 스케줄링합니다.
  failedRootsSnapshot.forEach((root) => {
    const helpers = helpersByRootSnapshot.get(root);
    const element = rootElements.get(root);
    helpers.scheduleRoot(root, element);
  });

  // 마운트된 루트 스냅샷에 대해 리프레시를 스케줄링합니다.
  mountedRootsSnapshot.forEach((root) => {
    const helpers = helpersByRootSnapshot.get(root);
    helpers.scheduleRefresh(root, update);
  });
}

React (리액트)가 업데이트된 컴포넌트를 사용하는 방법

React (리액트)는 resolveFamily (리졸브패밀리)를 사용하여 컴포넌트 또는 Hooks (훅)의 최신 버전을 가져옵니다.

// 핫 리로딩을 위해 함수를 해결합니다.
export function resolveFunctionForHotReloading(type: any): any {
  // resolveFamily 함수를 사용하여 현재 타입에 대한 최신 패밀리 정보를 가져옵니다.
  const family = resolveFamily(type);
  if (family === undefined) { // 패밀리 정보가 없으면 원래 타입을 반환합니다.
    return type;
  }
  // 패밀리 정보가 있으면 해당 패밀리의 현재(최신) 타입을 반환합니다.
  return family.current;
}

렌더링 중에 React (리액트)는 이전 컴포넌트 참조를 새 참조로 교체합니다.

// 현재 Fiber 노드와 보류 중인 props를 기반으로 작업 진행 중인 Fiber 노드를 생성합니다.
export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
  // 작업 진행 중인 Fiber 노드의 태그에 따라 타입을 결정합니다.
  switch (workInProgress.tag) {
    case IndeterminateComponent: // 미결정 컴포넌트
    case FunctionComponent: // 함수형 컴포넌트
    case SimpleMemoComponent: // 간단한 메모 컴포넌트
      // 핫 리로딩을 위해 현재 타입을 해결하여 작업 진행 중인 Fiber 노드의 타입으로 설정합니다.
      workInProgress.type = resolveFunctionForHotReloading(current.type);
      break;
    case ClassComponent: // 클래스 컴포넌트
      workInProgress.type = resolveClassForHotReloading(current.type);
      break;
    case ForwardRef: // ForwardRef 컴포넌트
      workInProgress.type = resolveForwardRefForHotReloading(current.type);
      break;
    default: // 그 외의 경우
      break;
  }
}

4. Fast Refresh (패스트 리프레시)가 HMR (핫 모듈 교체)과 통합되는 방식

지금까지의 모든 내용은 컴포넌트 수준 업데이트를 가능하게 하지만, Fast Refresh (패스트 리프레시)가 작동하려면 여전히 HMR (핫 모듈 교체)과의 통합이 필요합니다.

HMR (핫 모듈 교체) 워크플로

React (리액트)를 로드하기 전에 런타임을 애플리케이션에 주입합니다.

const runtime = require('react-refresh/runtime'); // react-refresh/runtime 모듈을 가져옵니다.
runtime.injectIntoGlobalHook(window); // 전역 훅에 런타임을 주입합니다.
// 전역 $RefreshReg$ 및 $RefreshSig$ 함수를 초기화합니다. (실제 구현은 아래에서 덮어쓰여짐)
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;

Fast Refresh (패스트 리프레시) 등록 로직으로 각 모듈을 래핑합니다.

// 현재 모듈의 $RefreshReg$ 함수를 설정합니다.
window.$RefreshReg$ = (type, id) => {
  const fullId = module.id + ' ' + id; // 모듈 ID와 컴포넌트 ID를 결합하여 전체 ID를 생성합니다.
  RefreshRuntime.register(type, fullId); // RefreshRuntime에 컴포넌트를 등록합니다.
};
// 현재 모듈의 $RefreshSig$ 함수를 설정합니다.
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;

try {
  // !!! 실제 모듈 소스 코드 !!!
} finally {
  // 모듈 처리 후 이전 $RefreshReg$ 및 $RefreshSig$ 함수로 복원합니다.
  // (이 부분은 코드 스니펫의 맥락상 prevRefreshReg, prevRefreshSig가 정의되어 있다고 가정합니다.)
  // window.$RefreshReg$ = prevRefreshReg;
  // window.$RefreshSig$ = prevRefreshSig;
}

모든 모듈을 처리한 후 HMR (핫 모듈 교체) API에 연결합니다.

const myExports = module.exports; // 현재 모듈의 내보내기 객체를 가져옵니다.

// 현재 모듈이 React Refresh 경계인지 확인합니다.
if (isReactRefreshBoundary(myExports)) {
  module.hot.accept(); // HMR을 수락합니다 (번들러에 따라 다름).
  const runtime = require('react-refresh/runtime'); // react-refresh/runtime 모듈을 가져옵니다.

  // performReactRefresh 함수를 30ms 디바운스로 실행하도록 설정합니다.
  let enqueueUpdate = debounce(runtime.performReactRefresh, 30);
  enqueueUpdate(); // 업데이트를 큐에 넣습니다.
}

isReactRefreshBoundary (이즈리액트리프레시바운더리)는 모듈이 핫 리로딩을 지원하는지 또는 전체 라이브 리로드가 필요한지를 결정합니다.

웹 환경에서의 사용

Fast Refresh (패스트 리프레시)는 원래 React Native (리액트 네이티브)용으로 만들어졌지만 핵심 구현은 플랫폼에 독립적이므로 웹 애플리케이션에서도 사용할 수 있습니다.

원래 React Native (리액트 네이티브)용으로 출시되었지만 대부분의 구현은 플랫폼에 독립적입니다.

웹 애플리케이션에서 Fast Refresh (패스트 리프레시)를 사용하려면 Metro (메트로) (React Native (리액트 네이티브)의 번들러)를 Webpack (웹팩)으로 교체하고 위에 설명된 통합 단계를 따르십시오.

---