##この記事を書いた理由
Reactを学習し始めて２ヶ月程度。
なんとなくでしかまだわかっていないのですが、とにかく実践あるのみかと思い、家計簿アプリを作成しました。
結果つまずいたところがたくさんあったので、備忘録がてら記事にしたいと思います。
また、私と同じくReactの学習を始めたての方の参考になれば嬉しいです。
##本題：ログイン後、リロードすると一瞬ログイン画面が表示される
ログインをしているかどうかを判別し、
ログインしているのであればHomeコンポーネントを表示
そうでなければLoginコンポーネントを表示する といった挙動にしていました。
App.js
function App() {
return (
<AuthProvider>
<Router>
<div>
<PrivateRoute exact path="/" component={Home} />
<Route exact path="/Signup" component={Signup} />
<Route exact path="/Login" component={Login} />
</div>
</Router>
</AuthProvider>
);
}
export default App;
これが、ログインしているはずなのに、ほんの一瞬ですがLoginコンポーネントが表示されていました。
これは、firebaseのデータベースに登録されているユーザーなのかどうかを取得するまでの間に
先にログインしていない認識の状態のLoginコンポーネントが出てしまっていたようです。
これは一旦、ログインをしているかしていないかの判断を待っている間の
ローディング画面を作ってあげる必要があります。
まずuseStateで下記内容を作成。
AuthProvider.js
const [loading, setLoading] = useState(true);
初期値はtrue（ローディング画面の状態）にしておきます。
その後、ログイン認証済かどうか確認する前に下記useEffectの記述を追加。
AuthProvider.js
useEffect(() => {
const unsubscribed = auth.onAuthStateChanged((user) => {
setCurrentUser(user);
setLoading(false);
});
return () => {
unsubscribed();
};
}, []);
userがログインしていると無事判別できたら、
ローディングをfalseにすることで、Homeコンポーネントが表示されるようになりました！！