useEffect 함수는

컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.
useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다.
즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다.

useEffect 사용법

useEffect(function,deps)

-function : 수행하고자 하는 작업
-deps : 검사하고자하는 특정 값을 배열의 형태로 담는다.

useEffect 함수 불러오기

import {useEffect} from 'react'

1. Component가 mount 됐을 때 (처음 나타났을 때)

useEffect(() => {
  console.log('마운트 될 때만 실행된다');
}, []);

-컴포넌트가 화면에 가장 처음 렌더링 될 때 한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다.

useEffect(() => {
  console.log('렌더링 될 때 마다 실행된다');
}, );

-만약 배열을 생략한다면 리렌더링 될 때 마다 실행된다.

2. Component가 update 될 때 (특정 props, state가 바뀔 때)

useEffect(() => {
  console.log(name);
  console.log('업데이트 될 때 실행된다');
}, [name]);

-특정값이 업데이트 될 때 실행하고 싶을 때는 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.
(의존값이 들어있는 배열 deps 이라고도 한다. dependency를 의미.)

-업데이트 될 때만 실행하는 것이 아니라 마운트 될 때도 실행된다.

3. Component가 unmount 될 때(사라질 때) & update 되기 직전에

useEffect(() => {
  console.log('effect');
  console.log(name);
  return () => {
	console.log('cleanup');
    console.log(name);
  }; }, []);

-cleanup 함수 반환 (return 뒤에 나오는 함수이며 useEffect에 대한 뒷정리 함수라고 한다.)

-언마운트 될 때만 cleanup 함수를 실행하고 싶을 때
: 두 번째 파라미터로 빈 배열을 넣는다.

-특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때
: deps 배열 안에 검사하고 싶은 값을 넣어준다.