[React] useEffect에서 Cleanup 함수 사용하기

예제코드

input

<Card className={classes.login}>
  <form onSubmit={submitHandler}>
    <div
      className={`${classes.control} ${
        emailIsValid === false ? classes.invalid : ''
      }`}
    >
      <label htmlFor="email">E-Mail</label>
      <input
        type="email"
        id="email"
        value={enteredEmail}
        onChange={emailChangeHandler}
        onBlur={validateEmailHandler}
      />
    </div>
    <div
      className={`${classes.control} ${
        passwordIsValid === false ? classes.invalid : ''
      }`}
    >
      <label htmlFor="password">Password</label>
      <input
        type="password"
        id="password"
        value={enteredPassword}
        onChange={passwordChangeHandler}
        onBlur={validatePasswordHandler}
      />
    </div>
    <div className={classes.actions}>
      <Button type="submit" className={classes.btn} disabled={!formIsValid}>
        Login
      </Button>
    </div>
  </form>
</Card>

useEffect

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

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

clearTimeout

• 브라우저 내장 함수
• 타이머를 지운다.

return () ⇒ {};

• 익명함수로 useEffect 내부에서 클린업 함수로 실행된다.
• 새로운 타이머를 설정하기 전에 타이머를 지운다.
  • 처음 실행되기 전에는 실행되지 않는다.

실행결과

• 타이핑 시 클린업 함수는 여러번 실행되지만 identifier 함수는 한번만 실행된다.
• http 리퀘스트 요청 시 유용하게 사용할 수 있다.

참고

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript