# 122 [udemy React 완벽 가이드 노트] useEffect에서 Cleanup함수 사용하기

 useEffect(() => {
    setFormIsValid(
      enteredEmail.includes("@") && enteredPassword.trim().length > 6
    );
  }, [setFormIsValid, enteredEmail, enteredPassword]);

 이 코드는 모든 키스트록이 있을 때마다

react가 재실행되어 이전 DOM과 현재 DOM을 비교하는 작업을 하게 된다.   

지금 작업은 복잡하지 않지만 

더 복잡해지는 순간 너무 많은 실행이 쓸데없이 이뤄지게 된다. 

트래픽이 증가하게 된다!

(사용자 이름이 사용중인지 확인하기 위해

백엔드로 http 리퀘스트를 보내기 같은 것들)

 

 

목표 : 키 입력 후 멈춘  시간이 길 때만 일을 시켜보자 

---

키입력 하고 멈춘 시간이 길 때만 이메일 유효성 검사를 해보자

 

 

---

1. setTimeout으로 유효성 검사를  실행하기 전에 딜레이를 시켜준다. 

 

 useEffect(() => {
    setTimeout(() => {
      console.log("Checking form validity!");
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);
  }, [enteredEmail, enteredPassword]);

그런데 딜레이만 시켜줄 뿐, 실행은 모두 된다. 

 

 

---

2. timer를 저장해두었다가 키가 입력되면 지우도록 하자.

 

사용자가 입력을 끝내면 마지막 타이머만 실행되게 하는것이다. 

사용자가 입력하는 동안에는 앞의 타이머가 계속 지워지게 된다.

(계속 지워져서 마지막 타이머만 남아있게 된다)

 

그러기 위해 클린업 함수를 사용하자

 

 

클린업 함수

---

useEffect의 return을 이용하자

return에는 구체적인 것 예를들면 함수를 써야 한다. 

이것이 useEffect가 다음 함수를 실행하기 전에 실행되는 클린업 함수다. 

 

 

클린업 함수의 실행

---

1. 처음 실행될 때 빼고 클린업 함수가 먼저 실행된 뒤 

useEffect의 내부의 함수가 실행된다. 

2. 이펙트를 특정한 컴포넌트가 DOM에서 언마운트 되기 전마다 실행된다. 

(컴포넌트가 재사용 될 때마다)

 

**** 사이드 이펙트 함수가 실행되기 전에는 실행되지 않는다. ****

 

 

---

3. 클린업 함수에 clearTimeout을 실행하자 

useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking form validity!");
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);

    return () => {
      clearTimeout(identifier);
    };
  }, [enteredEmail, enteredPassword]);

 

그러면 

 

setFormIsValid 할 때마다 먼저 clearTimeout 하고 실행되게 된다. 

즉, 사용자가 계속 입력할 때는 계속 setTimeout 함수가 새로 실행이 되는데, 

 

0.5초이후 실행되는 동안 계속 사용자가 입력하게 되면 

다음 setTimeout함수가 실행되려고 하고 그러면 clearTimeout이 된다. 

 

사용자가 입력을 모두 끝내게 되면 

clearTimeout되지 않고 0.5초 후에(시간은 알아서 조정하자) setFormIsValid 함수가 실행되어

id와 password 유효성 검사를 하게 된다.