useEffect 1 (로그인 / 로그아웃)

 

useEffect

 

 

 const [isLoggedIn, setIsLoggedIn] = useState(false);

위의 이미지는 State를 이용하여 로그인을 하면 State를 true로 업데이트시켜 UI를 업데이트하는 컴포넌트를 사용한 것입니다.

 

하지만 로그인을 하고 새로고침 등 애플리케이션을 다시 로드할 경우 전체 리액트 스크립트가 다시 시작되기 때문에

 

실행에서 얻은 모든 변수가 사라지게 됩니다.

 

다시 로드될 때 모든 데이터가 사라지므로 어딘가에 저장하는 것이 좋을 것입니다.

 

브라우저에는 우리가 사용할 수 있는 저장소가 여러 개 있는데 일반적으로 쿠키 또는 로컬 저장소가 있습니다.

 

  const loginHandler = (email, password) => {
    localStorage.setItem("isLoggedIn", "1");

    // 로그인 되었을 때 State를 true로 업데이트
    setIsLoggedIn(true);
  };

함수 loginHandler는 로그인 버튼을 클릭했을 때 실행되는 함수이기 때문에 해당 함수 안에서 로그인 정보를 저장하는 코드를 작성해주었습니다.

 

localStorage를 사용하면 로컬 저장소를 실행할 수 있게 되고, setItem()는 브라우저에서 사용할 수 있는 전역 객체입니다.

 

setItem()의 첫 번째 인자는 식별자이며, 식별자는 문자열로 구성된 사용자가 원하는 식별자를 사용하시면 됩니다.

 

setItem()의 두 번째 인자는 문자열이며, 저의 경우 로그인을 했다는 뜻으로 "1"을 사용했습니다.

 

여기까지 하면 아래 이미지와 같이 로그인을 했을 때 로컬 저장소에 저장이 되게 됩니다.

 

 

이제 새로고침 등 다시 로드했을 때도 로컬 저장소에 저장된 값은 사라지지 않고 그대로 있게 됩니다.

const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");

getItem()을 사용하면 로컬 저장소에서 해당 식별자(위의 단계에서 정해준 식별자)에 저장된 값을 반환하게 됩니다.

  if (storedUserLoggedInInformation === "1") {
    setIsLoggedIn(true);
  }

 

반환 받은 값으로 해당 조건에 만족하면 State 업데이트 함수를 이용하여 State를 업데이트 해줍니다.

 

 

이렇게 다시 로드되었을 때 로컬 저장소에 저장된 값을 확인하고 State를 업데이트 시켜주게 되면 로그아웃은 되지 않게 됩니다.

 

 

하지만 해당 접근 방식의 가장 큰 단점은 무한 루프를 만들 수 있다는 것입니다.

 

 

왜냐하면 페이지가 다시 로드되었을 때 로컬 저장소에 저장 여부를 확인하고, 저장되어 있다면 State를  업데이트 해주고

 

 

State 업데이트 함수가 호출될 때 마다 해당 컴포넌트 함수가 다시 실행되기 때문입니다.

 

 

따라서 해당 조건문은 또 다시 실행되고 조건에 충족되면 또 다시 State 업데이트 함수가 실행되는 것을 반복하게 됩니다.

 

 

이를 해결하기 위해 사용하는 것이 useEffect입니다.

 

 

 

useEffect는 두 개의 인자를 취하여 호출됩니다.

useEffect( () => { ... } ,  [ dependencies ] );

첫 번째 인자는 함수이며 해당 함수는 모든 컴포넌트 평가 후에 실행되어야 하는 함수입니다.

(지정된 의존성이 변경된 경우)

 

두 번째 인자는 지정된 의존성으로 구성된 배열입니다.

 

즉 의존성으로 구성된 배열이 바뀔 때마다 인자로 받은 함수가 실행되는 것입니다.

 

아래 코드와 함께 살펴보겠습니다.

  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  }, []);

함수의 실행문 부분에는 로컬 저장소의 값을 읽어오는 코드를 넣어줍니다.

 

이유는 컴포넌트 함수에서 직접 실행하고 싶지 않기 때문입니다.

 

왜냐하면 이제 useEffect에 인자로 준 함수는 리액트에 의해 실행되기 때문입니다.

 

또한 해당 함수는 의존성 배열이 변경된 경우에만 실행이 됩니다.

 

위의 코드 같은 경우 컴포넌트 함수 내부에서 의존성 배열의 변화가 일어나지 않기 때문에

 

실직적으로 애플리케이션이 처음 로드될 때만 실행되게 됩니다.

 

이제 페이지를 다시 로드해도 로그인 상태를 유지할 수 있게 되었습니다.

 

 

마지막 로그아웃입니다.

const logoutHandler = () => {
    localStorage.removeItem("isLoggedIn");
    setIsLoggedIn(false);
  };

removeItem을 사용하여 로컬 저장소에서 해당 식별자를 삭제해주었습니다.

 

 

 

전체 코드

import React, { useState, useEffect } from "react";


function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  }, []);

  const loginHandler = (email, password) => {
    localStorage.setItem("isLoggedIn", "1");

    // 로그인 되었을 때 State를 true로 업데이트
    setIsLoggedIn(true);
  };

  const logoutHandler = () => {
    localStorage.removeItem("isLoggedIn");
    setIsLoggedIn(false);
  };

  return (
    <React.Fragment>
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </React.Fragment>
  );
}

export default App;