[29] 리액트 useEffect

useEffect ?

컴포넌트가 렌더링될때 특정작업을 실행할수있도록 하는 훅이다.

클래스형 컴포넌트에서는 생명주기 메소드를 사용하여 이용할수있는데

함수형 컴포넌트에서는 useEffect를 사용하면된다.

useEffect[ 함수 , 의존성배열]

첫번째인자 : 함수

리액트는 렌더링 이후에 실행할 함수( useEffect 첫번째 인자 ) 를 가지고있다 DOM 업데이트 이후 불러내게된다.

만약 첫번째 인자 함수에서 return 하게되면 그 함수가 컴포넌트 unmount 될때 실행되게된다.

→ 이것을 이용해서 cleanUp 함수를 작성할수도있다

두번째인자 : 의존성 배열

배열의 형태로 특정한 값이 변경될때 첫번째인자 즉 useEffect 함수를 실행시키고싶을경우 그값을 넣어준다.

예를들어 input 값안에 들어있는 데이터가 변경될때마다 useEffect를 실행시키고 싶다면

input데이터를 받는 state 나 값을 두번째 인자에 넣어주면된다.

값을 넣지않고 빈배열만 넣어서 사용할수도있는데

이때는 컴포넌트가 최초 렌더링 이후 mount 될때 한번만 실행되게된다.

import React, { useEffect, 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);

  **useEffect(() => {
    const storedUserLoggedinInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedinInformation === "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 = () => {
    localStorage.setItem("isLoggedIn", "0");
    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;