useEffect - 2. clean up 함수

• 아래와 같은 코드가 있다.

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

  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
  };

  const passwordChangeHandler = (event) => {
    setEnteredPassword(event.target.value);
  };

 

그러나 이 input에서 입력할때마다 이벤트가 발생하므로 이벤트 지연이 필요할 것 같다.

<input
  type='email'
  id='email'
  value={enteredEmail}   
  onChange={emailChangeHandler}
 />

<input
  type='password'
  id='password'
  value={enteredPassword}
  onChange={passwordChangeHandler}
/>

 

사용자가 타이핑을 살짝 멈출때 유효성을 확인하도록 개선이 필요하다.
이것을 디바운싱(Debouncing: 연속되게 호출되는 함수들 중 마지막 함수만 호출되도록 하는 것)이라고 한다. 
이를 useEffect의 clean up 함수를 통해 구현할 수 있다.

클린업 함수는 useEffect의 return 안에 구현되어
(useEffect함수가 처음 실행되는 경우를 제외하고) useEffect 함수가 실행될 때마다 실행된다.

 

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log('유효성검증');
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );
    }, 500);
    return () => {
      console.log('클린 업!');
      clearTimeout(identifier);
    };
  }, [enteredEmail, enteredPassword]);

입력할 때마다 의존성 배열에 넣은 입력값들이 바뀌어서 useEffect가 호출된다.
그러나 identifirer 함수는 500ms 이후에 시행되기로 하고 , 함수가 500ms 내에 다시 호출되면 
클린업 함수가 먼저 실행되어  clearTimeout(identifier) 으로 이전에 호출한 identifier는 사라진다.