[React] useEffect()

React의 Main Job은?

• 리액트의 main job은 UI를 rendering하는 것이다.
• 즉, 상태를 관리하며, 변화가 있다면 화면을 re-rendering해준다. (리랜더링 한다는것은 함수를 위에서부터 다시 읽는다는 것과 동일하다.)

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

• 예를들어, App함수는 isLoggedIn의 state가 바뀔때마다, 리엑트에 의해 자동으로 재실행된다.
• 하지만 함수의 재실행(리랜더링)을 필요로하지 않은 경우가 있을 수도 있다.
• http request의 경우, 무한 루프가 생길 가능성이 있다.
• 이러한 side effect를 처리하기 위해 useEffect()를 사용한다.

useEffect()

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

• dependencies가 변경된 경우에, 첫 번째 매개변수의 함수가 실행된다.
• 그렇지 않은 경우, 컴포넌트가 다시 렌더링 될 때는 실행되지 않는다.
• 즉, useEffect()를 활용하여, 첫번째 매개변수인 함수가 언제 실행될지 제어할 수 있다.

useEffect() 사용하기1

import { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  // count에 변화가 있을 때 반응한다.
  useEffect(() => {
    console.log(`Clicked ${count} times`);
  }, [count]);

  // dependencies에 아무것도 넣지않으면 컴포넌트가 처음 로드될때 실행이된다.
  useEffect(() => {
    console.log(`Component Loaded`);

    // 전역적으로 이벤트를 주어야할 경우, useEffect를 사용할 수 있다. 
    const handleScroll = () => {
      console.log(window.scrollY);
    };
    document.addEventListener('scroll', handleScroll);

    // 전역적으로 이벤트를 주었을 경우, 다음과 같이 해제를 해주어야한다.
    return () => document.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div>
      <span>You clicked {count} times</span>
      <button onClick={() => setCount(count + 1)}>add</button>
    </div>
  );
}

export default App;

useEffect() 사용하기2

• data fetching 할 때 유용하다.

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 storedUserLoggedInInformation = localStorage.getItem('isLoggedIn');
  // 아래와 같은 코드는 무한 루프에 빠진다.
  //if (storedUserLoggedInInformation === '1') {
  //  setIsLoggedIn(true);
  //}
  
  // localStorage에 저장이 되어있는지 확인하고, 저장되어있다면 isLoggedIn을 true로 설정한다.
  // state가 변경되었기 때문에 App 컴포넌트가 재실행된다 -> 무한 반복
  
  
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 아래 코드는 의존성이 없기 때문에 앱이 시작될 때 한번만 코드가 실행된다.
  useEffect(() => {
    if (storedUserLoggedInInformation === '1') {
      setIsLoggedIn(true)
    }
  }, []);

  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>
  );
}

export default App;