새로고침에도 살아남고 다른 탭과도 동기화되는 useState
테마 토글언어 선택"X 알림 안 보기"처럼 사용자 설정은 localStorage에 영속되는 게 자연스럽습니다. 하지만 SSR 환경에서 window.localStorage는 첫 렌더에 존재하지 않아, 단순 useState(() = localStorage.getItem(...))은 hydration 미스매치를 만듭니다. 이 훅은 첫 렌더에선 initial을 그대로 쓰고, 마운트 후 effect에서 저장된 값을 읽어와 setState로 동기화 + hydrated 플래그를 따로 노출합니다. 깜빡이긴 하지만 SSR/CSR HTML이 동일하기 때문에 미스매치가 없습니다. 또 다른 탭에서 같은 key가 바뀌면 storage 이벤트로 자동 동기화됩니다.
데모는 테마 / 카운터 / 이름 3개 슬롯을 보여주고, 페이지를 새로고침해도 값이 남아있다는 걸 직접 체험할 수 있게 했습니다. 다른 탭을 열어 카운터를 바꿔 보면 이 탭에서도 즉시 반영됩니다.
import type { Metadata } from "next";
import { UseLocalStorageDemo } from "./-components/UseLocalStorageDemo";
export const metadata: Metadata = {
title: "useLocalStorage — 영속 useState 훅 (데모)",
description: "값을 localStorage에 저장하고 다른 탭과 동기화되는 useLocalStorage 훅의 라이브 시연.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="min-h-[100dvh] bg-white flex items-center justify-center">
<UseLocalStorageDemo />
</main>
);
}