[인프런] 8. 로그아웃 구현하기

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어 강의 - 대시보드 | 인프런 (inflearn.com)

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어 | 제

 

 

1. 로그아웃 기능 구현하기 

 

- 회원가입이 완료되면 파이어베이스는 자동으로 로그인 상태로 전환한다. 

 

1)

- 로그아웃 훅을 만들어 본다. 

 

src/hooks/useLogout.js

import { useState } from 'react'
import { appAuth } from '../firebase/config'
import { useAuthContext } from './useAuthContext'
import { signOut } from "firebase/auth";

export const useLogout = () => {
    // useSignup 에서 사용하는 것들을 여기서도 활용합니다.

    // 에러 정보를 저장합니다.
    const [error, setError] = useState(null);
    // 현재 서버와 통신중인 상태를 저장합니다.
    const [isPending, setIsPending] = useState(false);
    // 유저정보를 전역에서 활용할 수 있도록 dispatch 함수를 통해 업데이트합니다.
    // 여기서는 유저의 상태를 로그아웃으로 업데이트합니다.
    const { dispatch } = useAuthContext();

    // 로그아웃합니다.
    const logout = () => {
        setError(null); // 아직 에러가 없으니 null 입니다.
        setIsPending(true); // 통신중이므로 true입니다.

        signOut(appAuth).then(() => {
            // 로그아웃 성공!
            dispatch({ type: 'logout' });
            setError(null);
            setIsPending(false);
        }).catch((err) => {
            setError(err.message);
            setIsPending(false);
            console.log(err.message);
        });
    }
    return { error, isPending, logout }
}

 

 

 

2)

- 코드가 완성되었으면 AuthContext.js로 이동하여 action의 타입이 logout인 경우를 설정한다. 

 

src/context/AuthContext.js

switch (action.type) {
	case 'login':
	    return { ...state, user: action.payload }
	case 'logout':
	    return { ...state, user: null }
	default:
	    return state
}

 

 

3)

- 이제 useLogout 훅을 사용할 수 있도록 Nav.js에 로그아웃 버튼을 추가한다. 

 

src/component/Nav.js

import styles from './Nav.module.css'
import { Link } from 'react-router-dom'
import { useLogout } from '../hooks/useLogout'

export default function Nav() {
    const { logout } = useLogout();

    return (
        <nav className={styles.nav}>
            <h1 className={styles.tit}>두근 두근 비밀일기</h1>
            <ul className={styles.list_nav}>
                <li><Link to="/login">로그인</Link></li>
                <li><Link to="/signup">가입하기</Link></li>
                <li><button type="button" onClick={logout}>로그아웃</button></li>
            </ul>
        </nav>
    )
}

 

 

4)

- Nav.module.css 파일에 로그아웃 버튼 스타일링을 추가 

 

src/components/Nav.module.css

.nav .list_nav {
    display: flex;
    justify-content: right;
    gap: 16px;
    align-items: center;
}

.
.
.

.nav button {
    padding: 6px 12px;
    border-radius: 10px;
    background-color: teal;
    border: none;
    color: #fff;
    cursor: pointer;
}