훅의 규칙

 

• (필수) 단순히 use로 시작하는 모든 함수입니다.

useState, useEffect, useReducer, 커스텀 훅,...

 

• (필수) 리액트 훅은 리액트 컴포넌트 함수에서만 호출해야 합니다.

 

const emailReducer = (state, action) => {
  useState() // 불가능!
  if (action.type === 'USER_INPUT') {
    return { value: action.val, isValid: action.val.includes('@') };
  }
  if (action.type === 'INPUT_BLUR') {
    return { value: state.value, isValid: state.value.includes('@') };
  }
  return { value: '', isValid: false };
};

 

이렇게 단순 객체를 반환하는 함수에는 훅을 사용할 수 없습니다.

 

• (필수) 리액트 훅은 리액트 컴포넌트 함수 또는 사용자 정의 함수의 최상위 수준에서만 호출해야 합니다.

 

useEffect(() => {
 console.log('HI');
 useContext(); // 불가능!
 
 return () => {
   console.log('HELLO');
 };
}, []);

 

if (true) {
  useState(); // 불가능!
}

 

중첩 문 또는 블록 문에서 호출하는 것은 허용되지 않습니다.

 

• (권장) useEffect에서 항상 참조하는 모든 항목을 의존성으로 내부에 추가해야 합니다.

 

useEffect(() => {
  const identifier = setTimeout(() => {
    setFormIsValid(
      emailIsValid && passwordIsValid
    );
  }, 500);
  
  return () => {
    clearTimeout(identifier);
  };
}, [emailIsValid, passwordIsValid]); // setFormIsValid도 추가해야 하지만 이건 기본적으로 리액트에서 보장해줌

 

emailIsValid와 passwordIsValid처럼 주변 함수에 의해 노출되는 데이터는 반드시 의존성 배열에 넣어주어야 합니다.