SSR 요청과 hydration을 고려한 Nuxt 공유 상태를 관리합니다.
useState는 고유 key로 Nuxt가 직렬화하고 hydration하는 반응형 상태를 만듭니다. 서버 요청 사이에 모듈 전역 상태를 공유하는 문제를 피합니다.
key는 앱 전체에서 충돌하지 않게 의미 있게 만들고 초기화 함수는 직렬화 가능한 값을 반환합니다.
화면 하나에만 필요한 값은 일반 ref로 두어 공유 범위를 불필요하게 넓히지 않습니다.
서버 모듈 최상위의 reactive 객체는 사용자 요청 사이에 데이터가 섞일 수 있습니다.
로컬 프로젝트에서 확인해보세요reset 함수를 추가해 진도를 초기값으로 되돌리세요.
<script setup>
const progress = useState("course-progress", () => 20);
</script>
<template>
<main>
<h1>공유 진도 {{ progress }}%</h1>
<button @click="progress = Math.min(100, progress + 10)">10% 학습</button>
</main>
</template>