useEffect에서 CleanUp 함수

clean up 함수 예제를 보기 전 디바운싱(Debouncing)에 대해 먼저 알아보자.

 

Debouncing 이란?

'연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식' 이다.

onChange이벤트를 통해 입력값에 대한 유효성 검사를 하다보면 입력값의 상태를 입력할 때 마다 상태 변경하는 경우가 생긴다.

상태가 변경될 때마다 화면이 재렌더 되거나, 처리로직을 재수행 하는 경우 과부화가 생길 수 있음...!

따라서 각 항목 별 로 이벤트를 관리하지 말고 디바운싱을 하여, 그룹단위로 이벤트를 처리해보자..!

---

예제) 로그인 시, id/pw입력값에 대한 유효성 검사.

 

[디바운싱 전]

  const [enteredEmail, setEnteredEmail] = useState(''); //이메일(아이디) 입력값 저장
  const [emailIsValid, setEmailIsValid] = useState();   //패스워드 입력값 저장
  const [formIsValid, setFormIsValid] = useState(false); //유효성 여부 저장

  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
    setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      )
  };

  const passwordChangeHandler = (event) => {
    setEnteredPassword(event.target.value);
    setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      )
  };

 

[디바운싱(클린업) 후]

  const [enteredEmail, setEnteredEmail] = useState(''); //이메일(아이디) 입력값 저장
  const [emailIsValid, setEmailIsValid] = useState();   //패스워드 입력값 저장
  const [formIsValid, setFormIsValid] = useState(false); //유효성 여부 저장

useEffect(()=>{
    const identifier = setTimeout(() => {
      console.log("Checking from validity!")
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      )
    }, 500) //5초가 지난 후에 수행

    return ()=>{
      console.log("CLEAN UP!")
      clearTimeout(identifier)
    } //클린업 함수
  }, [enteredEmail, enteredPassword])

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

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

emailChangeHandler와 passwordChangeHandler에서 유효성 체크를 각각 진행한 것을,

useEffect hook에서 email, password 값이 변경되는 이벤트를 묶어서 관리하도록 디바운싱 하였다.

---

CLEAN UP 함수 : useEffect  hook 에서 return시 사용하는 함수

위의 예제를 보면, 클린 업 함수는 아래 부분이다.

()=>{
      console.log("CLEAN UP!")
      clearTimeout(identifier)
    } //클린업 함수

 

클린업 함수 프로세스..

1. useEffect함수의 SideEffect함수가 실행되기 전에는 작동하지 않는다.
2. 모든 SideEffect함수가 실행되기 전 작동한다.

따라서 '예제' 코드를 보면..  

1. 아이디/패스워드 입력 시, useEffect함수 수행.

2. 클린업 함수 수행

    - clearTimeout() 함수를 통해 이전에 부른 setTimeout함수를 취소한다.

3. 5초 뒤, 폼 유효성 여부 확인한다.

---

혹시나 틀린 부분 있으면 댓글 대환영입니다..!😂

 

참고출처 : udemy react강의 내멋대로 정리