useEffect - 1. 사용 목적

리액트 라이브러리 자체의 목적은 UI 렌더링이다. 사용자의 행위와 상호작용하면서 재렌더링 하는 것이다.
화면에 뭔가를 가져오는 것 외의 것을 사이드 이펙트(side-effect)라고 한다.
HTTP 리퀘스트를 보내는 것, 브라우저저장소에 정보를 저장하는 것 등이 사이드 이펙트다.
이러한 것은 리액트가 고려해야하는 작업이 아니다. 이런 사이드이펙트는 컴포넌트 평가의 밖에서 이뤄져야한다.
사이드 이펙트가 너무 오래걸리는 작업이면 컴포넌트 렌더링이 지연되며,
사이드 이펙트에 의해 state가 변경된다면 무한루프에 빠질 수 있다.
useEffect는 사이드이펙트를 처리하기 위해서 만들어졌다.
side effect 작업을 분리시켜 다른 시점(ComponentDidMount)에서 처리하도록 하는 것이 useEffect이다.

 

function App() {
  const loginInfo = localStorage.getItem('isLoggedIn');

  if (loginInfo === '1') {
    setIsLoggedIn(true);
  }

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

  const loginHandler = (email, password) => {
    localStorage.setItem('isLoggedIn', '1');
    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>
  );
}

로그인 상태관리를 위와 같이 하는 코드가 있다면 이 화면은 무한루프에 빠진다.
localstorgae에서 키확인 -> login state 변경 -> state가 변경되었으므로 재렌더링
-> 재렌더링되면서 다시 localstorage에서 키 확인..

이러한 상황에서 useEffect가 필요하다.

useEffect는 모든 컴포넌트의 렌더링이 끝난 후에 실행되며, 
의존성 배열에 놓인 요소의 변경시에만 실행된다. 


useEffect의 첫번째 인수는 렌더링 주기 후에 실행될 함수이고, 두번째 인수는 의존성 배열이다.

useEffect 안에 화면 새로고침 후 한번만 실행될 코드를 넣어주면 된다.

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

  useEffect(() => {
    const loginStorageInfo = localStorage.getItem('isLoggedIn');
    if (loginStorageInfo === '1') {
      setIsLoggedIn(true); //재렌더링 되지않음
    }
  }, []);

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