변화 방향(▲/▼)·diff 시각화에 가장 자주 쓰이는 가장 단순한 훅
usePrevious(value)의 구현은 단 4줄입니다. useRef에 value를 넣고, useEffect에서 매 렌더 후 ref.current를 갱신해 다음 렌더에서 "이전 값"으로 읽히게 만듭니다. 첫 렌더에는 undefined라는 점만 주의하면 됩니다. 코드는 짧지만 활용은 광범위합니다 카운터의 / 표시, 주식 시세표의 가격 색 변화, 폼 dirty 검사, animation transition 트리거까지. "지금 값 한 단계 전 값"의 비교가 필요할 때마다 등장합니다.
데모는 4종 모의 주식 시세표입니다. 가격 갱신 버튼을 눌러 무작위 변동을 일으키면 각 행마다 prev next가 작은 화살표색라인 통과 표시로 함께 그려집니다.
import type { Metadata } from "next";
import { UsePreviousDemo } from "./-components/UsePreviousDemo";
export const metadata: Metadata = {
title: "usePrevious — 이전 값 보관 훅 (데모)",
description: "이전 렌더의 값을 그대로 들고 있어 변화 방향·diff 시각화에 쓰는 usePrevious 훅의 라이브 시연.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="min-h-[100dvh] bg-white flex items-center justify-center">
<UsePreviousDemo />
</main>
);
}