존재하지 않는 일기 url입력 시 alert이 두 번 떠요

안녕하세요

아래와 같이 코드를 작성하고 실행했는데

존재하지 않는 id 로 이동 (예: /edit/111)하면

alert이 한번 뜨게되고 [확인]을누르면

url 은 홈으로 이동되고 동일한 alert이 또 한번 더 뜨게됩니다.

import Header from '../components/Header';
import Editor from '../components/Editor';
import Button from '../components/Button';
import { useParams, useNavigate } from 'react-router-dom';
import { useContext, useEffect, useState } from 'react';
import { DiaryStateContext, DiaryDispatchContext } from '../App';

const Edit = () => {
    const params = useParams();
    const nav = useNavigate();
    const { onDelete, onUpdate } = useContext(DiaryDispatchContext);

    const data = useContext(DiaryStateContext);
    const [curDiaryItem, setCurDiaryItem] = useState();

    /* const getCurrentDiaryItem = () => {
        const currentDiaryItem = data.find((item) => String(item.id) === String(params.id));
        
        if(!currentDiaryItem){
            window.alert("존재하지 않는 일기입니다.");

            // 마운트 되기 전에 동작하기 때문에 제대로 동작을 안함.
            nav("/", { replace: true });
        }

        return currentDiaryItem;
    } */

    // 따라서 useEffect로 설정해줘야함 
    useEffect(()=>{
        const currentDiaryItem = data.find((item) => String(item.id) === String(params.id));
        
        if(!currentDiaryItem){
            window.alert("존재하지 않는 일기입니다.");
            nav("/", { replace: true });
        }

        setCurDiaryItem(currentDiaryItem);
    }, [params.id])

    const onSubmit = (input) => {
        onUpdate(params.id, input.createdDate.getTime(), input.emotionId, input.content);
        nav("/", { replace: true });
    };

    const onClickDelete = () =>{
        if(window.confirm("일기를 삭제할까요? 다시 복구되지 않아요!")){
            onDelete(params.id);

            // 이벤트 함수 안에 있기 때문에 마운트 이후 수행됨. 
            nav("/", { replace: true });
        }
    }

    return (
        <div>
            <Header
                title={"일기 수정하기"}
                leftChild={<Button text={"< 뒤로가기"} onClick={() => nav(-1)} />}
                rightChild={<Button text={"삭제하기"} type={"NEGATIVE"} onClick={onClickDelete}/>}
            />
            <Editor initData={curDiaryItem} onSubmit={(input) => {
                onSubmit(input);
            }} />
        </div>
    )
}   

export default Edit;