hmr과 브라우저 새로고침의 차이점

전체 데이터와 구조가 바뀌면 hmr과 브라우저 새로고침의 차이점이 있을지 궁금해서 알아보았다.

대략적으로 브라우저 새로고침은 브라우저 자체가 다시 실행되는것이고 hmr은 단순히 데이터만 바뀐다고 알고 있었다.

맞는지 알아본 결과...

브라우저 새로고침:

브라우저 새로고침은 코드 변경 시 전체 페이지를 다시 로드하는 방식입니다. 코드 변경이 발생하면 브라우저는 서버에 새로운 페이지를 요청하고, 전체 페이지를 다시 렌더링하여 변경 사항을 적용합니다. 이는 서버와의 완전한 재로딩을 필요로 하며, 변경된 코드의 상태를 유지하지 않고 초기 상태로 돌아갑니다. 따라서 페이지의 상태나 입력값 등이 초기화될 수 있습니다.

Vite의 HMR:

Vite의 HMR은 코드 변경 시 수정된 모듈만을 교체하여 애플리케이션을 업데이트하는 방식입니다. 코드 변경이 발생하면 Vite는 수정된 모듈을 감지하고 해당 모듈만 다시 로드하여 애플리케이션에 변경 사항을 적용합니다. 이는 브라우저의 새로고침보다 빠르며, 애플리케이션의 상태나 입력값을 유지한 채로 코드 변경을 반영할 수 있습니다. 따라서 애플리케이션의 개발 중에도 손쉽게 코드를 수정하고 확인할 수 있습니다.

요약하면, 브라우저 새로고침은 전체 페이지를 다시 로드하여 변경 사항을 적용하는 반면, Vite의 HMR은 수정된 모듈만 교체하여 애플리케이션을 업데이트한다는 것이다. HMR은 빠르고 상태를 유지하지만 브라우저 새로고침, 즉 리로드는 상태를 유지하지 않고 초기상태로 돌아간다.

결국 내가 대략적으로 생각한 방향은 맞았지만 상태의 차이를 생각하지 못했다. 천천히 하나씩 알아가자.