Fast Refresh

Written by 심재철

Hot Reloading이란

컴포넌트의 코드를 수정하면 페이지 리로딩 없이 바로 리렌더링되는걸 hot reloading이라고 한다. Fast Refresh는 Hot reloading의 새로운 버전이다. Next.js 9.4 이상 버전에서 기본적으로 활성화 되어 있다.

Hot Reloading의 문제점

Hot reloading은 오랫동안 많은 사람들에게 사용되어 왔었다. 하지만 역사적인 이유로 깨지기 쉽기 때문에 Next.js에서는 이 hot reloading을 재구현해서 사용해왔었다.

근데 이 구현된 hot reloading에는 문제가 하나 있었는데 만약 개발자가 오타를 내서 애플리케이션에 오류가 발생할 경우 설정해놨던 상태들이 모두 날라가게 된다는것이다.

이것은 기존의 Hot reloading을 대체 구현한 Next.js의 Hot reloading에서 어쩔수 없이 발생했던 차선책이었다.

Fast Refresh

Fast Refresh라는 기능은 이미 리액트에 통합되어 있다. React Refresh

Next.js는 React Refresh를 사용하며, 수정된 파일에 해당하는 컴포넌트만 리렌더링된다. 이제 새로운 Hot Reloading 버젼인 Fast Refresh는 다음 기능을 갖게 되었다.

• 정확한 에러의 위치를 알려준다

• 에러가 발생한 코드와 관련된 코드들을 보여주며, 에디터에서 볼 수 있게 click-to-open 버튼이 생겼다.

• 에러를 수정하면 기존의 애플리케이션 상태를 날리지 않고 제대로 복구 해준다.

• 에러를 수정하면 런타임에러를 자동으로 제거해준다.

요약

Fast Refresh는 Hot Reloading의 새로운 버전이며, 에러가 나더라도 애플리케이션의 상태를 날리지 않는다.