123. useEffect에서 Cleanup 함수 사용하기

로그인 시에 글자를 입력할 때마다 유효성 검사를 하는 경우는 불필요할 수도 있다.

예를 보면 간단하게 진행되기 때문에 괜찮은 것 같지만 예를 들면 http 요청을 통해서 데이터가 존재하는 지 확인한다고 했을 때는 입력이 끝난 경우에 한 번씩만 실행하는 것이 네트워크 트래픽에 부담을 주지 않는 일이기 때문이다. 

디바운싱(Debouncing)이라는 개념이 등장하는데 
사용자가 입력을 멈췄을 때 유효성 검사를 실시하는 것과 같은 경우를 말한다.

익명의 함수를 반환하는 클린업 함수를 사용해보자

모든 새로운 사이드이펙트 함수가 실행되기 전에 클린업 함수가 실행된다

 

 useEffect(() => {
    const identifier = setTimeout(() => {
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );
    }, 500);

    return () => {
      console.log('clean up');
      clearTimeout(identifier);
    };
  }, [enteredEmail, enteredPassword]);