React Hook 규칙 정리 (Rules of Hooks)

1. 핵심 규칙 2가지

규칙 번호 설명
1 Hook은 반드시 컴포넌트 최상단(top level) 에서 호출해야 함
2 Hook은 반드시 함수형 컴포넌트 또는 사용자 정의 Hook 내부에서만 호출해야 함

2. 잘못된 사용 예시

조건문이나 반복문 안에서 사용 (규칙 1 위반)


function MyComponent() {
  if (condition) {
    const [state, setState] = useState(0); // 잘못된 사용
  }
}

일반 함수나 클래스 내부에서 사용 (규칙 2 위반)


function helper() {
  const [state, setState] = useState(0); // 잘못된 사용
}

class MyComponent extends React.Component {
  render() {
    const [state, setState] = useState(0); // 클래스에서는 사용 불가
  }
}

3. 올바른 사용 예시

컴포넌트 최상단에서 호출

function MyComponent() {
  const [state, setState] = useState(0); // 올바른 위치
}

사용자 정의 Hook 내부에서 호출


function useCustomHook() {
  const [value, setValue] = useState(0); // 사용 가능
  return [value, setValue];
}

4. 사용자 정의 Hook 작성 규칙

항목 설명
이름 규칙 반드시 use로 시작 (useForm, useToggle 등)
내부 동작 다른 Hook (useState, useEffect 등)을 자유롭게 사용할 수 있음

5. Hook 규칙 자동 감지 설정 (ESLint)