반응 빠른 새로 고침이란 무엇입니까?

안녕하세요 친구 여러분, Blogvent에 오신 것을 환영합니다. 3일차!

최신 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 프로젝트를 즉시 복제 및 배포하세요.