← Back to rules

react/exhaustive-deps 정확성

An auto-fix is available for this rule.

작동 방식

useEffect 및 유사한 훅의 종속성 목록을 확인합니다.

왜 문제가 되는가?

React 훅 중 useEffect와 같은 것은 종속성 목록을 인수로 전달해야 합니다. 이 목록은 효과가 다시 실행되어야 할 때를 결정하는 데 사용됩니다. 만약 목록이 누락되거나 불완전하다면, 효과는 필요 이상으로 자주 실행되거나 아예 실행되지 않을 수 있습니다.

예시

이 규칙에 부적절한 코드 예시:

function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo);
  }, []);
  // 종속성 배열에서 `props`가 누락됨
  return <div />;
}

이 규칙에 적절한 코드 예시:

function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo);
  }, [props]);
  return <div />;
}

구성

이 규칙은 다음 속성을 가진 구성 객체를 수용합니다.

추가 훅

형식: string

기본값: null

선택적으로 검사할 추가 훅에 대한 정규표현식을 제공할 수 있습니다.

사용 방법

이 규칙을 설정 파일 또는 CLI를 통해 활성화하려면 다음과 같이 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/exhaustive-deps": "error"
  }
}

CLI

oxlint --deny react/exhaustive-deps --react-plugin

참고자료

• 규칙 소스