[React] 자동 로그인 구현하기 (useEffect())

오늘 할 것은?

useEffect() 훅을 이용한 자동 로그인 구현 예제입니다.

useEffect()를 쓰는 이유는?

보통 setState()로 정해놓은 상태가 업데이트 될 때 모든 컴포넌트들은 다시 렌더링됩니다. 이렇다보니 만약 로그인이 되있는지 확인하는 함수로 상태가 변경 되었을 때 모든 컴포넌트들이 다시 렌더링 되기 때문에 이런 비효율적인 상황을 막기 위해서 쓰는 것입니다.

useEffect()의 사용 방법

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

첫번째 인자의 함수에는 실행해야 할 것들, 두번째 인자에는 이 훅이 의존해야할 값들이 배열로 들어갑니다. 두번째 인자가 비어있다면 최초 마운트 시에만 함수가 호출되며 의존값이 아예 존재하지 않으면 렌더링 할 때 마다 함수가 호출됩니다.

예제

로그인 버튼을 누르면 로그인 상태라는 것을 알리는 아이템을 로컬 스토리지에 저장하도록 합니다.
새로고침을 눌렀을 때 컴포넌트가 다시 렌더링 될 때 최초 1회 해당 아이템을 찾아 로그인 여부를 판단하는 예제입니다.

활용

로그인 상태 여부 저장

const loginHandler = (email, password) => {
    localStorage.setItem("isLoggedIn", "LOGGED_IN");
    setIsLoggedIn(true);
};

이 코드는 로그인 버튼이 눌렸을 때 실행되는 함수의 코드입니다.
localStorage 의 메소드를 활용해 key가 isLoggedIn이고 value가 LOGGED_IN으로 만들어진 아이템을 로컬 스토리지에 저장합니다.
즉, 로그인 상태라는 것을 알리기 위해 만들어진 아이템입니다.

그 아이템은 이렇게 확인할 수 있습니다. 크롬에서 개발자 도구를 열고, Elements ... 옆의 화살표가 두개 있는 버튼을 눌러 Application을 선택하고 Local Storage를 선택합니다.

로그인 상태 여부 확인

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

  useEffect(() => {
    const storedInformation = localStorage.getItem("isLoggedIn");

    if (storedUserLoggedInInformation) {
      setIsLoggedIn(true);
    }
  }, []);
  
  ... 이후 생략

storedInformation 변수에서 localStorage 의 getItem() 메소드를 통해 로그인 상태를 가져와서 저장합니다. 만약 값이 있다면 함수 맨 윗줄에서 정의된 로그인 상태 변수 isLoggedIn의 상태를 true로 변경합니다.
useEffect() 메소드를 사용했기 때문에 렌더링 시 최초 1회만 실행됩니다.

로그아웃으로 마무리

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

로그아웃 버튼을 눌렀다면 로컬 스토리지에서 로그인 상태를 확인하기 위해 만들었던 아이템을 제거합니다.