usePreventLeave

웹 페이지에서 사용자에게 실제로 페이지를 떠날 것인지 묻는 확인 대화 상자를 표시합니다.

입력 중인 내용이 있을 때 탭을 닫거나 새로고침하면 브라우저의 이탈 경고가 뜹니다.

"use client";

import { useState } from "react";

import { Input } from "@/components/ui/input";
import { usePreventLeave } from "@/registry/default/hooks/usePreventLeave";

export function UsePreventLeaveExample() {
  const [title, setTitle] = useState("");

  const isDirty = title.length > 0;

  usePreventLeave(isDirty);

  return (
    <div className="space-y-4">
      <p className="text-sm text-muted-foreground">
        입력 중인 내용이 있을 때 탭을 닫거나 새로고침하면 브라우저의 이탈 경고가
        뜹니다.
      </p>
      <div className="space-y-2">
        <Input
          className="w-full rounded-md border px-3 py-2 text-sm"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="제목을 입력하세요"
        />
      </div>
    </div>
  );
}

설치

pnpm

pnpm dlx shadcn@latest add @chaesunbak/use-prevent-leave

npm

npx shadcn@latest add @chaesunbak/use-prevent-leave

다음 코드를 프로젝트에 복사/붙혀넣기 하세요.

hooks/usePreventLeave.ts

import { useEventListener } from "usehooks-ts";/** * 페이지 이탈 방지 훅 * @param prevent - 페이지 이탈 방지 여부 */export function usePreventLeave(prevent: boolean = true) {  useEventListener("beforeunload", (event) => {    if (prevent) {      event.preventDefault();    }  });}

사용법

import { useState } from "react";
import { usePreventLeave } from "@/hooks/use-prevent-leave";

function PostEditor() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const isDirty = title.length > 0 || content.length > 0;

  usePreventLeave(isDirty);

  return (
    <form>
      <input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="제목을 입력하세요"
      />
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="내용을 입력하세요"
      />
    </form>
  );
}

인터페이스

속성	타입	기본값	설명
`prevent`	`boolean`	`true`	이 값이 `true`일 때 페이지 이탈(새로고침/닫기 등)을 방지합니다.

usePreventLeave

설치

사용법

인터페이스

usePreventLeave

On this page