준수해야하는 두가지 규칙

최상위에서만 Hook을 호출해야 한다.

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 말자. 항상 React함수의 최상위에서 호출하자.

why? ⇒ React는 Hook의 호출 순서에 따라 특정 state의 useState인지 인지하게 된다.

오직 React 함수 내에서 Hook을 호출해야 한다.

Hook을 일반적인 javascript 함수에서 호출하지 말자. 대신 아래와 같이 호출할 수 있다.

• React 함수 컴포넌트에서 호출하기
• Custom Hook에서 Hook 호출하기

ESLint 플러그인

위 규칙을 강제하는 ESLint 플러그인을 이용하면 강제할 수 있다.

설명

한 컴포넌트에 여러개의 Hook을 사용할 수 있다.

function Form() {
  // 1. name이라는 state 변수를 사용하세요.
  const [name, setName] = useState('Mary');

  // 2. Effect를 사용해 폼 데이터를 저장하세요.
  useEffect(function persistForm() {
    localStorage.setItem('formData', name);
  });

  // 3. surname이라는 state 변수를 사용하세요.
  const [surname, setSurname] = useState('Poppins');

  // 4. Effect를 사용해서 제목을 업데이트합니다.
  useEffect(function updateTitle() {
    document.title = name + ' ' + surname;
  });

  // ...
}

React는 어떻게 특정 state가 어떤 useState호출에 해당하는지 알 수 있나?

⇒ React가 Hook의 호출되는 순서에 의존하여 알게된다.

그러므로 조건문, 반복문, 중첩된 함수에서 사용하면 안된다.

// 🔴 조건문에 Hook을 사용함으로써 첫 번째 규칙을 깼습니다
  if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }