존재하지 않는 일기 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;

回答 1

0

winterlood

2026-06-13T00:56:35.343Z

안녕하세요 멍이님 이정환입니다.

해당 이슈는 아래 캡쳐 남겨드린 것 처럼 바로 다음 챕터에서 다루고 있습니다. 참고 부탁드립니다 😀

0

meong

2026-06-17T04:47:06.168Z

안녕하세요.

질문에 올린 코드에서도 이미 해당 내용을 읽고 의존성 배열의 값을 id로 해두었는데도 발생합니다..ㅠㅜ

useEffect(()=>{
        const currentDiaryItem = data.find((item) => String(item.id) === String(params.id));
        
        if(!currentDiaryItem){
            window.alert("존재하지 않는 일기입니다.");
            nav("/", { replace: true });
        }

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

0

meong

2026-06-17T04:49:42.422Z

다음 챕터에서 다루는 이슈는

<Edit 페이지에서 일기를 수정했을 때 "존재하지 않는 일기입니다" 라는 얼럿이 발생> 인데

저는 <홈에서 Edit 페이지로 이동할 때 존재하지 않는 아이디를 넘길 경우 얼럿이 두 차례 발생>인 상황입니다...

0

winterlood

2026-06-17T04:54:52.823Z

안녕하세요 이정환입니다

질문가이드라인에 올려드린대로 전체 프로젝트 코드를 깃허브 링크로 전달해주시면 정확한 원인 파악이 가능합니다.

다만 ㅠㅠ 현재 제가 휴가중에 있어 금주 금요일 오전 중으로 회신드리겠습니다!