useEffect

모든 컴포넌트 재평가 후에 useEffect를 실행한다.
컴포넌트가 렌더링되는 주기 안에서 사용되어야 하는 코드가 있을 때 유용함.
의존성이 변경될 때 실행된다.
useEffect 에서 사용하는 모든 것을 의존성으로 넣어야 한다.
안넣어도 되는 것은

• 상태 업데이트 함수
• 내장 API 또는 함수 (fetch(), localStorage)
• useEffect 외의 변수

import { useEffect, useState } from 'react';

let myTimer;

const MyComponent = (props) => {
  const [timerIsActive, setTimerIsActive] = useState(false);

  const { timerDuration } = props; // using destructuring to pull out specific props values

  useEffect(() => {
    if (!timerIsActive) {
      setTimerIsActive(true);
      myTimer = setTimeout(() => {
        setTimerIsActive(false);
      }, timerDuration);
    }
  }, [timerIsActive, timerDuration]);
};

• timerIsActive 는 종속성으로 추가되었습니다. 왜냐하면 구성 요소가 변경될 때 변경될 수 있는 구성 요소 상태이기 때문이죠(예: 상태가 업데이트되었기 때문에)
• timerDuration 은 종속성으로 추가되었습니다. 왜냐하면 해당 구성 요소의 prop 값이기 때문입니다 - 따라서 상위 구성 요소가 해당 값을 변경하면 변경될 수 있습니다(이 MyComponent 구성 요소도 다시 렌더링되도록 함).
• setTimerIsActive 는 종속성으로 추가되지 않습니다. 왜냐하면예외 조건이기 때문입니다: 상태 업데이트 기능을 추가할 수 있지만 React는 기능 자체가 절대 변경되지 않음을 보장하므로 추가할 필요가 없습니다.
• myTimer 는 종속성으로 추가되지 않습니다. 왜냐하면 그것은 구성 요소 내부 변수가 아니기 때문이죠. (즉, 어떤 상태나 prop 값이 아님) - 구성 요소 외부에서 정의되고 이를 변경합니다(어디에서든). 구성 요소가 다시 평가되도록 하지 않습니다.
• setTimeout 은 종속성으로 추가되지 않습니다 왜냐하면 그것은 내장 API이기 때문입니다. (브라우저에 내장) - React 및 구성 요소와 독립적이며 변경되지 않습니다.

의존성 중 하나라도 변경되면 재실행된다.

useState 함수는 react에서 변하지 않을 것을 보장하기 때문에 넣을 필요한다.

useEffect는 무언가의 대한 응답으로 실행되는 코드를 다루는데 도움이 된다.

클린업

useEffect에서 함수 정의를 반환할 수 있다. 이 함수를 클린업 함수라고 한다.

useEffect 본문이 수행되기 전에 수행된다.

    useEffect(() => {
        const id = setTimeout(() => {
            console.log('EFFECT RUNNING');
            setFormIsValid(
                enteredEmail.includes('@') && enteredPassword.trim().length > 6
            );
        }, 500);

        return () => {
            console.log('CLEANUP');
            clearTimeout(id);
        };

    }, [enteredEmail, enteredPassword])

async function fetchDataHandler(){
 // fetch data

}

useEffect(()=>{
  fetchDataHandler();
});

useEffect(()=>{
  fetchDataHandler();
});

이렇게 정의하는 것은 useEffect 바깥에 fetchDataHandler(); 호출해서 렌더링 될 때마다 실행된다.

의존성을 정의해야 하는데

useEffect(()=>{
  fetchDataHandler();
},[fetchDataHandler]);

fetchDataHandler가 의존성 대상이다.
fetchDataHandler가 외부에 정의되어 있기 때문에 렌더링 시에 계쏙 재정의 되므로 마찬가지로 계속적으로 호출된다.
이를 해결하기 위해 useCallback 훅을 사용하는 것이 좋다.