useLocation, logOut

1. useLocation

useNavigate로 page가 이동할떄, 이동하면서 보내진 value나 state들을
받아서 사용할 수 있음.
console.log(location)을 찍어보면 넘어오는 data들을 확인 할 수 있음.

2. src/screens/Login.js

import { useLocation } from 'react-router-dom'
//1. react-router-dom으로부터 useLocation을 불러움.

function Login() {
  const location = useLocation()
  //2.location으로 만들어서 useLocation()을 사용함
  
  console.log(location)
  //3.location을 console로 찍어보면 넘어어는 data들을 확인 할 수 있음.
  
  const {
    register,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm({
    mode: 'onBlur',
    defaultValues: {
      username: location?.state?.username || '',
      password: location?.state?.password || '',
      //4. signUp page에서 navigate로 보내진 값(username, password)들을 
      //input 칸(username, password)에서
      //타이핑 없이 찍히게 할 수 있음.defaultValues로 설정해서 고럼.
      
    },
  })

3. LogOut

const logOut = () => {
  localStorage.removeItem(LOCALSTORAGE_TOKEN)
  isLoggedInVar(false)
}

const Home = () => {
  return (
    <Container>
      <Title>Home</Title>
      <button onClick={() => isLoggedInVar(true)}>Log in now</button>
      <button onClick={() => darkModeVar(true)}>darkMode</button>
      <button onClick={() => darkModeVar(false)}>whiteMode</button>
      <button onClick={logOut}>LogOut</button>/
    </Container>
  )
}

logout fn을 만들어서 onClick={logout}적용시켜주면끝남
logout fn은 localStorage.removeItem(LOCALSTORAGE_TOKNE)
isLoggedInVar(false)
하면 됨, 어려운거 전혀 없음.