• 사이트 이동을 위한 네비게이션
• 파이어베이스를 이용한 로그아웃

---

사이트 이동을 위한 네비게이션

사이트를 이동하기 위해서 react-router-dom의 Nav 컴포넌트를 활용한다.

1. 네비게이션 컴포넌트 작성
2. 라우터가 이를 제어하도록 라우터에 추가한다.

1. Navigation.jsx 컴포넌트 작성

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="profile">My Profile</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

2. 라우터에 추가

회원가입이나 로그인 페이지에서는 출력하지 않아도 된다. 따라서 isLoggedIn이 true일때만 네비게이션이 보이도록 구현하면 된다.

AppRouter.js

const AppRouter = ({ isLoggedIn }) => {
  return (
    <BrowserRouter>
      {isLoggedIn && <Navigation />}

      {isLoggedIn ? (
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="profile" element={<Profile />} />
        </Routes>
      ) : (
        <Routes>
          <Route path="/" element={<Auth />} />
        </Routes>
      )}
    </BrowserRouter>
  );
};

---

로그아웃

파이어베이스가 제공하는 기능을 사용하면 간단하다~~~ 개이득
Profile.jsx파일에 코드를 작성한다

import React from 'react';
import { getAuth, signOut } from 'firebase/auth';
import { auth } from '../fbase';



const Profile = () => {
  const onLogOutClick = () => {
  signOut(auth);
};
  return (
    <>
      <button onClick={onLogOutClick}>Log Out</button>
    </>
  );
};

• signOut(auth)
  사용자 정보 (auth)를 매개변수로 전달해주면 파이어베이스가 IndexedDB에 있는 정보를 비우고 로그아웃 처리까지 해준다.

로그아웃 절차가 끝나면 isLoggedIn이 false가 됨으로써 네비게이션이 보이지 않게 됨
이 때 페이지가 이동된 것이 아니기 때문에 페이지를 이동해주는 로직을 작성한다.

• 라우터를 이용한 리다이렉션
  : <Route>의 path 속성으로 * (와일드카드)를 사용하면 된다

• 자바스크립트를 이용한 리다이렉션
  : useNavigate

useNavigate

로그아웃 처리 후에 처음 화면으로 이동하도록 한다.
useNavigate 제공하는 navigate 함수를 사용한다.

Profile.jsx

import React from 'react';
import { getAuth, signOut } from 'firebase/auth';
import { auth } from '../fbase';
import { useNavigate } from 'react-router-dom';

const Profile = () => {
  let navigate = useNavigate();

  const onLogOutClick = () => {
    signOut(auth);
    navigate('/');
  };

  return (
    <>
      <button onClick={onLogOutClick}>Log Out</button>
    </>
  );
};

export default Profile;