useEffect() 종속성으로 추가할 항목 및 추가하지 않을 항목

effect 함수에서 사용하는 "모든 것"을 종속성으로 추가해야 힌다. 즉, 거기에서 사용하는 모든 상태 변수와 함수를 포함한다.

맞는 말이지만 몇 가지 예외가 있다. 다음 사항을 알고 있어야 한다.

여러분은 상태 업데이트 기능을 추가할 필요가 없다.
setState : React는 해당 함수가 절대 변경되지 않도록 보장하므로 종속성으로 추가할 필요가 없다.

"내장" API 또는 함수를 추가할 필요가 없다 fetch(), 나 localStorage 같은 것들 (브라우저에 내장된 함수 및 기능, 따라서 전역적으로 사용 가능): 이러한 브라우저 API/전역 기능은 React 구성 요소 렌더링 주기와 관련이 없으며 변경되지 않는다

또한 변수나 함수를 추가할 필요가 없다. 아마도 구성 요소 외부에서 정의했을 것이다 (예: 별도의 파일에 새 도우미 함수를 만드는 경우): 이러한 함수 또는 변수도 구성 요소 함수 내부에서 생성되지 않으므로 변경해도 구성 요소에 영향을 주지 않는다 (해당 변수가 변경되는 경우, 또는 그 반대의 경우에도 구성 요소는 재평가되지 않는다)

간단히 말해서: effect 함수에서 사용하는 모든 "것들"을 추가해야 한다. 구성 요소(또는 일부 상위 구성 요소)가 다시 렌더링 되어 이러한 "것들"이 변경될 수 있는 경우.그렇기 때문에 컴포넌트 함수에 정의된 변수나 상태, 컴포넌트 함수에 정의된 props 또는 함수는 종속성으로 추가되어야 한다

import { useEffect, useState } from 'react';
 
let myTimer;
 
const MyComponent = (props) => {
  const [timerIsActive, setTimerIsActive] = useState(false);
 
  const { timerDuration } = props;
 
  useEffect(() => {
    if (!timerIsActive) {
      setTimerIsActive(true);
      myTimer = setTimeout(() => {
        setTimerIsActive(false);
      }, timerDuration);
    }
  }, [timerIsActive, timerDuration]);
};

이 예에서:

timerIsActive 는 종속성으로 추가된다. 왜냐하면 구성 요소가 변경될 때 변경될 수 있는 구성 요소 상태이기 때문이다(예: 상태가 업데이트되었기 때문에)

timerDuration 은 종속성으로 추가된다. 왜냐하면 해당 구성 요소의 prop 값이기 때문이다 - 따라서 상위 구성 요소가 해당 값을 변경하면 변경될 수 있다(이 MyComponent 구성 요소도 다시 렌더링되도록 함).

setTimerIsActive 는 종속성으로 추가되지 않는다. 왜냐하면예외 조건이기 때문이다: 상태 업데이트 기능을 추가할 수 있지만 React는 기능 자체가 절대 변경되지 않음을 보장하므로 추가할 필요가 없다

myTimer 는 종속성으로 추가되지 않는다. 왜냐하면 이것은 구성 요소 내부 변수가 아니기 때문이다. (즉, 어떤 상태나 prop 값이 아님) - 구성 요소 외부에서 정의되고 이를 변경한다(어디에서든). 구성 요소가 다시 평가되도록 하지 않는다.

setTimeout 은 종속성으로 추가되지 않는다 왜냐하면 이것은 내장 API이기 때문이다. (브라우저에 내장) - React 및 구성 요소와 독립적이며 변경되지 않는다.