LocalStorage와 useEffect

LocalStorage.setItem (키, 밸류)를 통해 로컬 스토리지에 값을 저장

 

  const [isLoggedIn, setIsLoggedIn] = useState(false)

  useEffect(() => {

    const storedUserLoggedInInformation = localStorage.getItem('isLoggedIn')

    if (storedUserLoggedInInformation === '1') {

      setIsLoggedIn(true)

    }

  }, [])

useEffect로 로컬스토리지에서 가져온 값을 통해 로그인 인증을 하는 방법

useEffect 내부에서 작업하지 않고 컴포넌트 함수에서 작업을 한다면 내부적으로 로컬스토리지에서 isLoggedIn을 확인하고 setState에 의해서 다시 컴포넌트가 호출되고 다시 로컬스토리지에서 isLoggedin을 확인하고 setState에 의해서 다시 컴포넌트가 호출되는 무한루프에 빠지게 된다. 하지만 이러한 경우를 막는 것이 바로 useEffect의 의존성 배열이다.