Fast Refresh는 React 컴포넌트를 수정할 때 즉각적인 피드백을 제공하는 Next.js 기능입니다. Next.js Fast Refresh는 9.4 이상의 모든 Next.js 애플리케이션에서 기본적으로 활성화됩니다. Next.js Fast Refresh가 활성화되면 대부분의 수정 작업은 컴포넌트 상태를 유지하면서 1초 이내에 적용될 수 있습니다.
작동 방식
- React 컴포넌트만 내보내는 파일을 편집하는 경우
Fast Refresh는 해당 파일에 대한 코드를 업데이트하고 컴포넌트를 다시 렌더링합니다. 이 파일에서 스타일, 렌더링 로직, 이벤트 핸들러 또는 효과 등을 포함하여 어떤 것이든 편집할 수 있습니다. - React 컴포넌트가 아닌 것을 내보내는 파일을 편집하는 경우
Fast Refresh는 해당 파일과 해당 파일을 가져오는 다른 파일을 다시 실행합니다. 따라서Button.js및Modal.js가 모두theme.js를 가져오는 경우,theme.js를 편집하면 두 컴포넌트가 모두 업데이트됩니다. - 마지막으로, React 트리 밖에서 가져오는 파일을 편집하는 경우
Fast Refresh는 전체 리로드를 수행합니다. React 컴포넌트를 렌더링하지만 non-React 컴포넌트에서 가져오는 값을 내보내는 파일이 있을 수 있습니다. 예를 들어, 컴포넌트가 상수를 내보내고 non-React 유틸리티 파일이 가져오는 경우입니다. 이 경우 상수를 별도의 파일로 이동시켜 두 파일 모두에서 가져오는 것이 좋습니다. 이렇게하면Fast Refresh가 다시 작동됩니다. 다른 경우는 보통 비슷한 방식으로 해결할 수 있습니다.
오류 내구성 (Error Resilience)
구문 오류
개발 중 구문 오류가 발생하면 해당 파일을 수정하고 다시 저장할 수 있습니다. 오류가 자동으로 사라지므로 앱을 다시로드할 필요가 없습니다. 컴포넌트 상태를 잃지 않습니다.
런타임 오류
컴포넌트 내에서 런타임 오류가 발생하는 실수를 하면 해당 컴포넌트에서 컨텍스트 오버레이를 볼 수 있습니다. 오류를 수정하면 오버레이가 자동으로 사라지며 앱을 다시로드할 필요가 없습니다.
컴포넌트 상태는 렌더링 중에 오류가 발생하지 않은 경우 유지됩니다. 렌더링 중에 오류가 발생한 경우 React는 업데이트된 코드를 사용하여 애플리케이션을 다시 마운트합니다.
앱에 오류 경계를 가지고 있다면 (제품에서 우아한 실패를 위해 좋은 생각입니다) 렌더링 오류 이후 다음 수정에서 다시 렌더링을 재시도합니다. 이렇게 하면 항상 루트 앱 상태로 재설정되는 것을 방지할 수 있습니다. 그러나 오류 경계가 너무 작으면 안 됩니다. 그것들은 제품에서 React에 의해 사용되며 의도적으로 디자인되어야 합니다.
제한 사항
Fast Refresh는 컴포넌트의 지역 React 상태를 보존하려고 시도하지만, 안전한 경우에만 그렇게 합니다. 지역 상태가 매번 초기화되는 경우가 발생하는 몇 가지 이유는 다음과 같습니다.
- 지역 상태는 클래스 컴포넌트에 대해서는 보존되지 않습니다(함수 컴포넌트와 Hooks만 상태를 보존합니다).
- 수정하는 파일에 React 컴포넌트 이외에 내보낸 것이 있을 수 있습니다.
- 때로는 파일이
HOC(WrappedComponent)와 같은 고차 컴포넌트를 호출한 결과를 내보낼 수도 있습니다. 반환된 컴포넌트가 클래스인 경우 그 상태가 재설정됩니다. export default () => <div />;와 같은 익명 화살표 함수는Fast Refresh가 지역 컴포넌트 상태를 보존하지 않습니다. 대규모 코드베이스의 경우 name-default-component codemod를 사용할 수 있습니다.
함수 컴포넌트와Hooks로 코드베이스의 더 많은 부분이 이동함에 따라 상태가 더 많이 보존될 것으로 예상할 수 있습니다.
팁
-
Fast Refresh는 기본적으로 함수 컴포넌트(및Hooks)에서 React 지역 상태를 보존합니다. -
때때로 상태를 강제로 재설정하고 컴포넌트를 다시 마운트하려고 할 수 있습니다. 예를 들어, 애니메이션이 마운트 시에만 발생하는 경우 조정할 때 유용합니다. 이렇게 하려면 파일에서
// @refresh reset을 추가하면 됩니다. 이 지시문은 파일에 지역적으로 적용되며 해당 파일에 정의된 컴포넌트를 모든 수정에서 다시 마운트하도록Fast Refresh에 지시합니다. -
개발 중에 사용하는 구성 요소에
console.log또는debugger;를 추가할 수 있습니다.
Fast Refresh와Hooks
Fast Refresh는 가능한 경우 구성 요소의 상태를 수정 사이에 보존하려고 시도합니다. 특히useState및useRef는 인수를 변경하거나Hook호출의 순서를 변경하지 않는 한 이전 값을 보존합니다.
useEffect, useMemo 및 useCallback과 같은 종속성이 있는 Hooks는 Fast Refresh가 발생할 때마다 항상 업데이트됩니다. Fast Refresh가 진행되는 동안 종속성 목록은 무시됩니다.
예를 들어 useMemo(() => x * 2, [x])를 useMemo(() => x * 10, [x])로 편집하면 x(종속성)가 변경되지 않았음에도 다시 실행됩니다. React가 그렇게하지 않으면 편집 내용이 화면에 반영되지 않을 것입니다!
때로는 예기치 않은 결과가 발생할 수 있습니다. 예를 들어 종속성이 비어 있는 배열로 useEffect를 작성해도 Fast Refresh 도중 한 번은 다시 실행됩니다.
그러나 useEffect의 가끔씩 다시 실행되는 것에 대비하여 내성 있는 코드를 작성하는 것은 Fast Refresh가 아니더라도 좋은 관행입니다. 나중에 새로운 종속성을 도입하기 쉬워지고 React Strict Mode에서 적용되는 것이 좋습니다.
