120. useEffect() 훅 사용하기

선생님이 올려주신 프로젝트를 다운로드 받고

login 할 때 아래 코드도 실행되게끔 작성한다 
브라우저에 내장된 localStorage를 이용하는 것이다

localStorage.setItem('isLoggedIn', '1');

 

그러나 아래의 코드에는 문제가 한 가지 있다

바로 localStorage에서 isLoggedIn 정보를 가져오고 setIsLoggedIn 가 실행되는 순간 App.js 가 다시 실행되고 그럼 또 다시 localStorage 정보를 받아오는 그런 무한 루프가 발생한다

그래서 이러한 경우에 useEffect를 사용할 수 있다

 

import React, { useState } from 'react';

import Login from './components/Login/Login';
import Home from './components/Home/Home';
import MainHeader from './components/MainHeader/MainHeader';

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

  const userLoggedInfo = localStorage.getItem('isLoggedIn');
  if (userLoggedInfo === '1') {
    setIsLoggedIn(true);
  }

  const loginHandler = (email, password) => {
    // We should of course check email and password
    // But it's just a dummy/ demo anyways
    localStorage.setItem('isLoggedIn', '1');
    setIsLoggedIn(true);
  };

  const logoutHandler = () => {
    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;

 

useEffect에서
첫번째는 함수 형태이고 두 번째는 dependency 인자를 받는다

 앱이 시작하고 한 번만 실행되기를 원할 때 두번째 dependency에 [] 빈 배열을 넣으면 된다.