반응 빠른 새로 고침이란 무엇입니까?
5049 단어 reactnextjsblogventjavascript
최신 React 업데이트 또는 Next.js v10을 본 적이 있다면 "Fast Refresh"라는 용어를 본 적이 있을 것입니다. 이것은 사용자에게 그다지 영향을 미치지 않는 새로운 기능이지만 개발자 경험을 훨씬 더 좋게 만듭니다.
React Fast Refresh는 React Hot Loader를 대체합니다. 이전에 React Hot Loader는 가장 완벽한 것이 아니었습니다. 그것은 React 외부에 있었고 이상적이지 않은 디버깅 경험으로 이어졌습니다. 그러나 React Fast Refresh에는 더 빠르고, 오류를 더 잘 처리하고, 다시 렌더링하는 동안 상태를 보존하는 업데이트된 API가 있습니다.
그래서 그게 무슨 뜻이야? 간단한 카운터 구성 요소가 있다고 가정해 보겠습니다.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<p>You clicked the button {count} times.</p>
<button onClick={() => setCount(count + 1)}>
Count!
</button>
</>
);
그리고 "카운트!"버튼을 5번 누른 다음 새 코드 줄과 같은 간단한 변경 사항을 추가하기로 결정합니다.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<h1>Counter Example</h1>
<p>You clicked the button {count} times.</p>
<button onClick={() => setCount(count + 1)}>
Count!
</button>
</>
);
이 예에서 빠른 새로 고침 없이 이전에 브라우저 페이지를 보려면 이전 상태를 보려면 버튼을 다시 5번 클릭해야 합니다. 이제 빠른 새로 고침을 사용하면 해당 개수가 5로 유지됩니다!
이것은 분명히 매우 단순한 예이지만 게임 상태, 사용자 기본 설정, 양식, 클라이언트 측 탐색의 가능성에 대해 생각한다면 Fast Refresh가 해결하는 많은 문제가 있습니다!
또한 구문 또는 런타임 오류가 해결되면 자동으로 페이지를 다시 로드하고 React 트리 외부에서 무언가를 업데이트할 때 전체 다시 로드를 수행합니다(React 자체와 더 긴밀하게 통합되기 때문). 빠른 새로 고침은 클래스 기반 구성 요소가 아닌 기본 제공 기능 구성 요소에 대해서만 작동합니다.
나는 그것을 시도하고 싶다!
Next.js v10+ 스타터 프로젝트(빠른 새로 고침이 자동으로 활성화됨)를 보려면 this repo을 확인하거나 아래의 이 버튼을 클릭하여 새 Next.js 프로젝트를 즉시 복제 및 배포하세요.
Reference
이 문제에 관하여(반응 빠른 새로 고침이란 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/netlify/what-is-react-fast-refresh-3k6c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)