React / loginCheck customHook 만들기

포트폴리오 만드는중..오랜 사투끝에 로그인로그아웃 기능을 만들었다...하지만 세션을 리펙토링 해야한다..

그냥 세션스토리지에 저장했기 때문에..세션을 제대로 적용한것도 아니다..

갈길이 머니 일단 넘어가야지 ㅋㅋ..

로그인,로그아웃을 만드니 로그인 여부에 따라 UI를 다르게 해줘야 한다.

로그인체크를 반복하다보니 custom hook으로 만들어 관리해보았다.

 

hook을 만들땐 앞에 use를 붙혀줘야 된다고들 한다.

 

useLoginCheck.js

import React, { useEffect, useState } from 'react'

export default function useLoginCheck() {
    const [isLogin, setIsLogin] = useState(false)
 
    useEffect(() => {
      if(sessionStorage.getItem('user_id') === null){
      // sessionStorage 에 user_id 라는 key 값으로 저장된 값이 없다면
        console.log('isLogin ?? :: ', isLogin)
      } else {
      // sessionStorage 에 user_id 라는 key 값으로 저장된 값이 있다면
      // 로그인 상태 변경
        setIsLogin(true)
        console.log('isLogin ?? :: ', isLogin)
      }
    },[isLogin])
    
  return {isLogin}
}

커스텀훅을 만드는법은 어렵지 않다. 그냥 따로 빼어 관리하면되는데 리턴값 때문에 쫌 버벅거렸다.

처음엔 그냥 retrun isLogin 이라고 했다가 안되서 객체로 넘겨주니 잘되었다.

 

 

HaederTop.jsx

import React from 'react'
import { Link } from 'react-router-dom'
import header from '../../assets/css/common/header.module.css';
import useLoginCheck from '../Hook/useLoginCheck';

export default function HeaderTop() {
  const isLogin = useLoginCheck()
  const loginChk = isLogin.isLogin
  
  const handleLogout = () => {
    // sessionStorage 에 user_id 로 저장되어있는 아이템을 삭제한다.
      sessionStorage.removeItem('user_id')
      // App 으로 이동(새로고침)
      document.location.href = '/'
  }

  return (
    <>
      <div className={header.header_top}>
        {loginChk ? 
          <ul className={header.right}>
          <li><Link to="/" onClick={handleLogout}>로그아웃</Link></li>
          <li><Link to="/Cart">장바구니</Link></li>
          <li><Link to="/">마이페이지</Link></li>
        </ul>
        :
          <ul className={header.right}>
            <li><Link to="/Login">로그인</Link></li>
            <li><Link to="/Register">회원가입</Link></li>
            <li><Link to="/Cart">장바구니</Link></li>
            <li><Link to="/">마이페이지</Link></li>
          </ul>
        }
        <div className={header.top_logo_scroll}>
          <Link to="/"></Link>
        </div>
        <div className={header.top_logo}>
          <Link to="/"></Link>
        </div>
      </div>
    </>
  )
}

데이터를 받는 부분에서도 버벅거렸다.. props로 넘겨봤나..뭐더라..하면서 콘솔도 찍어보고 해맸다..

아직 리엑트 기초가 부족한 것 같다.

한번 해보았으니 반복되는 코드들은 전부 customHook으로 리펙토링 해볼 것이다.