TIL114. url을 직접? Route?

import {useEffect} from "react";
import {useNavigate} from "react-router-dom";
import Upload from "../components/model-upload/Upload";

function component({user}: {user: {[key: string]: string}}) {
  const navigate = useNavigate();
  useEffect(() => {
    if (!user.id) {
      alert("경고!");
    }
  }, []);
  return <div>component</div>;
}

export default component;

버튼을 눌러서 useNavigate의 route로 위 컴포넌트를 마운트하는데,
recoil state에 담긴 유저의 아이디가 없다면 컴포넌트가 마운트 됐을 때 경고창을 띄운다.

하지만 버튼을 누르지 않고 직접 입력으로 해당 url에 접근했을 경우,
유저의 아이디가 있든 없든 경고창을 띄운다.

이유는 useNavigate를 사용하여 이동하면 React Router의 라우팅 시스템이 활성화되고
경로 이동을 처리하게 되는데, URL을 직접 입력하면 React Router가 라우팅을 수행하지 않고 컴포넌트가 초기화되기 때문에 useEffect에서 if (!user.id) 조건문이 참이 되어 경고창이 표시된다.