Hook 사용 규칙

hook 사용에는 중요한 규칙이 있으며 이 규칙은 React에서 hook을 사용할 때 지켜야 하는 규칙입니다.

 

첫 번째는 React hook은 React 컴포넌트 함수나 사용자 정의 hook에서 호출해야 합니다. 

 

두 번째는 React hook은 React 컴포넌트 함수나 사용자 정의 hook 함수의 최상위 수준에서만 호출해야 합니다.

 

이는 중첩 함수에서 hook을 호출하면 안 된다는 뜻으로 예를 들어 useEffect의 인자로 주어지는 함수 안에서 hook을 사용하는 것은 불가능합니다.

(if문 안에서 사용하는 것도 불가능합니다.)

 

세 번째는 useEffect의 경우 참조하는 의존성 배열을 useEffect 내부에 추가해야 합니다.

  useEffect(() => {
    const identifer = setTimeout(() => {
      console.log("유효성 검사 중 입니다.");
      setFormIsValid(emailIsValid && passwdIsValid);
    }, 300);
    return () => {
      console.log("클린업 작업!");
      clearTimeout(identifer);
    };
  }, [emailIsValid, passwdIsValid]);

위의 예시 코드에서 return 윗부분을 보시면 setFormIsValid(emailIsValid && passwdIsValid); 을 확인할 수 있습니다.

 

다른 State인 emailIsValid와 passwdIsValid을 사용하고 있습니다.

 

이 경우 의존성 배열 안에는 emailIsValid, passwdIsValid 가 들어가야 합니다.

(State 업데이트 함수의 경우는 React에 의해 변경되지 않도록 보장되기 때문에 의존성 배열에 추가하지 않아도 됩니다.)