← Back to rules

react/rules-of-hooks Pedantic

작동 방식

리액트 훅의 규칙을 적용하여, 리액트 훅이 유효한 컨텍스트에서만 호출되고, 올바른 순서로 호출되도록 보장합니다.

왜 문제가 되는가?

리액트 훅은 정확히 작동하기 위해 특정 규칙을 따라야 합니다:

1. 훅은 항상 최상위 레벨에서만 호출해야 합니다 (반복문, 조건문 또는 중첩된 함수 내부에서는 절대 호출하면 안 됩니다)
2. 훅은 리액트 함수 컴포넌트 또는 사용자 정의 훅에서만 호출해야 합니다
3. 컴포넌트가 렌더링될 때마다 훅은 동일한 순서로 호출되어야 합니다

이 규칙을 위반하면 상태가 손상되거나 컴포넌트의 동작이 예측 불가능해지는 버그가 발생할 수 있습니다.

예시

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

// 반복문, 조건문 또는 중첩 함수 내부에서 훅을 호출하지 마세요
function BadComponent() {
  if (condition) {
    const [state, setState] = useState(); // ❌ 조건 내 훅 호출
  }

  for (let i = 0; i < 10; i++) {
    useEffect(() => {}); // ❌ 반복문 내 훅 호출
  }
}

// 일반 자바스크립트 함수에서 훅을 호출하지 마세요
function regularFunction() {
  const [state, setState] = useState(); // ❌ 일반 함수 내 훅 호출
}

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

// ✅ 리액트 컴포넌트의 최상위 레벨에서 훅을 호출하세요
function GoodComponent() {
  const [state, setState] = useState();

  useEffect(() => {
    // 효과 로직 여기에 작성
  });

  return <div>{state}</div>;
}

// ✅ 사용자 정의 훅에서 훅을 호출하세요
function useCustomHook() {
  const [state, setState] = useState();
  return state;
}

사용 방법

이 규칙을 구성 파일이나 명령줄 인터페이스를 통해 활성화하려면 다음을 사용하세요:

구성 파일 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/rules-of-hooks": "error"
  }
}

CLI

oxlint --deny react/rules-of-hooks --react-plugin

참고 자료

• 규칙 소스