Loading 상태와 컴포넌트

1. auth 및 fetch 데이터를 완전히 받아올 때까지, 즉 비동기 작업이 완료될 때까지 보여줄 로딩 화면이 필요하다.

• isLoading 상태 관리
• 로딩이 완료되면 isLoading 상태를 false로 변경합니다.
• isLoading이 true인 경우(로딩 중 상태) <LoadingScreen /> 컴포넌트를 렌더링하여 로딩 화면을 보여준다

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const init = async () => {
    // firebase 로딩, 로딩이 끝나면 로딩 스테이트 변경
    setIsLoading(false);
  };

  useEffect(() => {
    init();
  }, []);
  
  return (
    <>
      <GlobalStyles />
      {isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}
    </>
  );
}