[React Hook] 4. Hook 규칙

출처 공식 문서 : Hook의 규칙 – React (reactjs.org)

 

 

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

(1) 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.
(2) Hook을 일반적인 자바스크립트 함수에서 호출하지말고 React 함수 내에서 호출해야 한다.
(예외 - Custom Hook 이후 설명 예정)

2. ESLint 플러그인

> 위 두 규칙을 강제하는 플러그인이다.
- Create React App에 기본적으로 포함되어 있다.

 

3. 설명
만약에 조건부로 effect를 실행하기를 원한다면, 조건문을 Hook 내부에 넣을 수 있다.

 

예시)

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

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

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

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

  // ...
}

 

만약 if 문을 useEffect 바깥에 작성한다면 문제가 발생한다.

1. name이 ''가 아니다.

2. useEffect( function persistForm() ) 은 실행되지 않는다.

3. useState('poppins') 부터 에러가 발생한다.