[Firebase] Login/out 코드정리

코드정리

// components/Navbar.js

import { Link } from "react-router-dom";
import { FiShoppingBag, FiMenu } from "react-icons/fi";
import Button from "./ui/Button";
import { login, logout } from "../api/firebase;
import { useState } from "react";

function Navbar() {
  const [user, setUser]=useState();
  
  const handleLogin=()=>{
    login().then(setUser); //then( user => setUser(user))
  };
  
  const handleLogout=()=>{
    logout().then(setUser);
  };
  
  useEffect(()=>{
    onUserStateChange((user)=>{
      setUser(user); // user가 변경될때마다 컴포넌트에 state를 변경
    })
  }, [])

  return (
    <header>
      <Link to="/">
        <h1>MIOGY STUDIO</h1>
      </Link>
      <nav>
        <Link to="/products">Products</Link>
        {!user && <Button text="Login" onClick={login}></Button>}
        {user && <Button text="Logout" onClick={logout}></Button>}
      </nav>
    </header>
  );
}
export default Navbar;

1. useEffect : 동일인자이므로 참조값만 전달

// components/Navbar.js

  useEffect(()=>{
    onUserStateChange((user)=>{
      setUser(user); // user가 변경될때마다 컴포넌트에 state를 변경
    })
  }, [])

코드수정

//코드수정
useEffect(()=>{
    onUserStateChange(setUser) // 인자와 동일하므로 참조값만 전달 
  }, [])

2. onUserStateChange()로 인해 필요없는 상태관리제거

// components/Navbar.js

  const handleLogin=()=>{
    login().then(setUser); //then( user => setUser(user))
  };
  
  const handleLogout=()=>{
    logout().then(setUser);
  };

코드수정

//코드수정

const handleLogin=()=>{
    login();
  };
  
  const handleLogout=()=>{
    logout();
  };

• 이렇게 되면 handleLogin/out함수는 필요가 없어지므로 Button컴포넌트에 바로 적용한다.

// components/Navbar.js

  {!user && <Button text="Login" onClick={login}></Button>}
  {user && <Button text="Logout" onClick={logout}></Button>}

3. firebase.js내에 login/out

• 또한 firebase.js에서도 로그인 로그아웃 함수내에 결과값을 return해주지 않아도 되므로 코드수정

// components/Navbar.js

//로그인
export async function login() {
  return signInWithPopup(auth, provider)
    .then((result) => {
      const user = result.user; 
      console.log(user);
      return user;				
    })
    .catch(console.error);
}

//로그아웃
export async function logout() {
  return signOut(auth);
}

//사용자의 상태를 확인
export function onUserStateChange(callback) {
  onAuthStateChanged(auth, async (user) => {
    callback(user);
  });
}

코드수정

//코드수정

//명령형 함수로 변경됨.
export function login() {
  signInWithPopup(auth, provider).catch(console.error);
}

export function logout() {
  signOut(auth);
}

//사용자의 상태를 확인해야하는 컴포넌트가 사용할 함수
export function onUserStateChange(callback) {
  // onUserStateChange를 호출할때마다 콜백함수를 호출
  onAuthStateChanged(auth, async (user) => {
    callback(user);
  });
}

---

마치며

기능하나하나 완료될때마다 코드정리하는 습관을 들여야겠다.
초보 개발자는 부지런하기라도 해야지!!

정리한 부분

• 동일인자의 경우 참조값만 전달한다.
• 불필요한 함수는 컴포넌트내에 바로 적용.
• onUserChange()로 로그인상태관리를 할수있다. 따라서 login()과 logout()에 결과는 필요가 없으므로 명령형으로 정리한다.