리액트 Hook 규칙

1. 리액트 훅은 리액트 컴포넌트에서만 호출한다.
리액트 컴포넌트나 커스텀 훅에서만 호출한다.

 

2. 리액트 컴포넌트의 최상위수준에서만 호출한다.

useEffect( () => {
      useContext()  ... (x)

 

3. useEffect를 쓸때 주변 컴포넌트에서 오는 데이터들은 의존성 배열로 넣어줘야한다.

  useEffect(() => {
    const identifier = setTimeout(() => {
      setFormIsValid(passwordValid && passwordValid);
    }, 500);

    return () => {
      clearTimeout(identifier);
    };
  }, [emailValid, passwordValid]);

emailValid, passwordValid는 주변컴포넌트에서 사용하는 state(데이터) ~ 
의존성 배열에 집어넣지 않으면 alert 발생