인프런 커뮤니티 질문&답변

현재 진행중인 있는 웹 프로젝트에서 로그인 상태가 아닐경우, 해당페이지로 진입 할 수 없게하고 로그인이 필요하다는 경고창을 띄우려고 합니다.

특정 페이지에서

useEffect(() => {
const [isLoggedIn, setIsLoggedIn] = useRecoilState(isLoggedInState);

if(isLoggedIn === false){

alert("로그인이 필요합니다!");

navigate("/");

}

}, []);

위와 같은 방식으로 진입을 못하게 막으려고 하는데, useEffect가 Mount 및 UnMount될 때 alert가 실행되어 alert가 2번 발생하는 문제가 있습니다. 단 한번만 경고창을 띄우고 싶은데, 어떻게 해야할까요?

또한 이 방식보다 좋은 방식이 있으면 추천해주시면 감사하겠습니다.