useEffect #

• 컴포넌트가 mount, update, unmount 될 때 작성된 로직을 실행시키는 리액트 Hook.
• 필요에 따라 함수에 의존성 배열을 추가할 수 있다.

sideEffect #

• 컴포넌트가 화면에 렌더링 된 직후, 비동기로 처리되는 부수적인 효과.
• API 통신, DOM 조작 등 렌더링과 직접적인 연관이 없는 작업을 말함.
• useEffect는 이러한 sideEffect를 처리하기 위해 사용되는 Hook.

Hook #

• Hook은 리액트 버전 16.8부터 새로 추가된 요소로 기존의 클래스형 컴포넌트에서 관리되는
  상태나 생명주기 메소드를 함수형 컴포넌트에서 간편하게 사용할 수 있도록 도입된 개념

mount (화면에 렌더링 되는 시점) #

• 렌더링 되는 시점에 콜백함수 실행.

• useEffect의 두 번째 인자인 의존성 배열에 빈 배열을 넣어주면 마운트되는 시점인 최초 1회 실행.

  import { useEffect } from "react";
  
  const HookTest = () => {
  
      useEffect(() => {
          console.log("Mount");
      }, []);
  
  }
  

• 의존성 배열에 count라는 상태 데이터를 넣어주면 count가 업데이트될 때마다 실행.

  import { useEffect, useState } from "react";
  
  const HookTest = () => {
  
      const [count, setCount] = useState(0);
  
      useEffect(()=>{
          console.log(`count is update : ${count}`);
      },[count]);
  }
  

update (리렌더링 되는 시점) #

• 리렌더링 되는 시점에 콜백함수 실행.

• 의존성 배열을 넣지 않으면 컴포넌트가 업데이트될 때마다 실행됨.

  import { useEffect } from "react";
  
  const HookTest = () => {
  
      useEffect(() => {
          console.log("Update");
      });
  
  }
  

  ---

unmount (화면에서 사라지는 시점) #

• useEffect 내부에 함수를 반환하는 clean-up 함수를 작성하여 unmount 될 때 수행할 로직 작성.

  import { useEffect } from "react";
  
  const HookTest = () => {
  
      useEffect(() => {
          return () => {
              console.log("Unmount (clean-up)");
          }
      })
  }
  

  ---

Reference #

https://ko.legacy.reactjs.org/