[React Native] Fast Refresh란

fast refresh는 react native의 기능으로 react 컴포넌트에서 변경 사항에 대해 거의 즉각적인 피드백을 제공해줍니다. fast refresh는 기본적으로 활성화되어 있으며 react native dev menu에서 enable fast refresh를 토글할 수 있습니다. fast refresh가 활성화되면 대부분의 수정 사항은 1~2초 내에 화면에 반영됩니다.

작동 원리

• react 컴포넌트만 내보내는 모듈을 수정하면, fast refresh는 해당 모듈의 코드만 업데이트하고 컴포넌트를 다시 렌더링합니다.
• react 컴포넌트가 아닌 것을 내보내는 모듈을 수정하면, fast refresh는 해당 모듈과 이를 가져오는 다른 모듈들도 다시 실행합니다. 예를 들어, Button.js와 Modal.js가 Theme.js를 가져오는 경우, Theme.js를 수정하면 두 컴포넌트가 모두 업데이트됩니다.
• react 트리 외부에서 모듈을 가져오는 파일을 수정하면, fast refresh는 전체 새로 고침을 수행합니다. 

특징

• fast fresh는 함수 컴포넌트와 Hooks에서 react 로컬 상태를 유지합니다.
• 앱의 전체 재로딩을 피합니다.
• 때때로 상태를 초기화하고 컴포넌트를 다시 마운트하고 싶을 때 // @refresh reset을 추가하여 지시합니다.

fast refresh 이전의 옵션들

• live reloading: 파일에서 변경이 있을 때 전체 앱을 다시 로드하거나 새로고침
• hot reloading: 상태를 잃지 않고 변경된 파일만 새로 고칩니다.

오류 복원력

• fast refresh 세션 중에 구문 오류가 발생하면, 파일을 수정하고 다시 저장하면 빨간 박스가 사라집니다. 구문 오류가 있는 모듈은 실행되지 않으므로 앱을 새로 고칠 필요가 없습니다.
• 모듈 초기화 중 런타임 오류가 발생 후 수정해도 세션이 계속되어서 빨간 박스가 사라지고 모듈이 업데이트됩니다.
• 컴포넌트 내부에서 런타임 오류가 발생 후 수정해도 세션이 계속됩니다. react는 업데이트된 코드를 사용하여 애플리케션을 다시 로드합니다.
• 앱에 오류 경계가 있는 경우 빨간 박스 후에 다음 편집 시 렌더링을 다시 시도합니다. 이렇게 하면 항상 루트 앱 화면으로 돌아가는 것을 방지할 수 있습니다.

제한 사항

• fast refresh는 편집 중인 컴포넌트의 로컬 react 상태를 안전한 경우에만 유지하려고 합니다. 파일 편집 시 로컬 상태가 매번 초기화되는 이유는 다음과 같습니다.
  • 클래스 컴포넌트의 로컬 상태는 유지되지 않습니다.
  • 편집 중인 모듈이 react 컴포넌트 외의 다른 내보내기를 가질 수 있습니다.
  • createNavigationContainer과 같은 고차 컴포넌트를 호출하는 결과를 내보내는 모듈이 있습니다. 반환된 컴포넌트가 클래스인 경우 상태가 초기화됩니다.

fast refresh와 hooks

• 가능한 경우, fast refresh는 편집 간에 컴포넌트의 상태를 유지하려고 합니다. 특히 useState와 useRef는 인수나 hook 호출 순서를 변경하지 않는 한 이전 값을 유지합니다.
• 종속성이 있는 hooks(useEffect, useMemo, useCallback)는 fast refresh 중 항상 업데이트됩니다. fast refresh가 진행 중일 때 종속성 목록이 무시됩니다. 예를 들어 useMemo(() => x * 2,[x])를 2를 10으로 수정하면 x가 변경되지 않았더라도 다시 실행됩니다.