[react] useEffect에서 Clean-up 함수 사용하기

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) //0.5초가 지난 후 유효성 검사

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

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

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

이메일, 비밀번호에 대해 각각 유효성 검사를 진행하도록 되어있던 로직을 useEffect hook에서 이메일, 비밀번호 상태값이 변경되는 이벤트를 묶어 관리하도록 디바운싱 하였다.

 

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

• 리렌더링이 일어날 때 useEffect의 return 함수가 실행된다.
• 실행된 함수가 useEffect 내부 기능의 작동을 막는다.
• setState나 setTimeout, API 요청과 같은 비동기 함수가 작동할 때 조건문을 걸어 unmount 되지 않았을 때에만 실행할 수 있도록 한다.

()=>{
      console.log("CLEAN UP!")
      clearTimeout(identifier)
}

 

 

위 코드에 작성된 Clean up 함수는,

1. 첫 번째 SideEffect 함수가 실행되기 전에는 작동하지 않는다(처음 렌더링 되었을 때는 실행되지 않는다).
2. 첫번째 SideEffect 함수가 실행된 뒤로는 모든 SideEffect 함수가 실행되기 전에 작동한다(0.5초 타이머 걸려있으므로 Clean up 함수가 먼저 실행된다)
3. clearTimeout() 함수를 통해 Clean up 함수 실행 이전에 설정된(가장 마지막에 설정된) 타이머를 지워나간다(setTimeout 함수를 취소한다).

결론적으로 Clean up 함수를 사용함으로써 가장 마지막에 만들어진 setTimeout 함수만 남아 단 한 번의 유효성 검사만 이루어진다.

즉, 사용자가 이메일이나 비밀번호를 입력할 동안에는 유효성 검사가 이루어지지 않고, 사용자가 마지막 문자를 입력한 후 0.5초 뒤에 마지막으로 남은 setTimeout 함수가 실행되어 최종적으로 단 한번의 유효성 검사만이 이루어지게 되는 것이다.

 

참고한 블로그)

https://velog.io/@citron03/useEffect%EC%9D%98-Clean-up-%ED%95%A8%EC%88%98

https://soomst.tistory.com/entry/useEffect%EC%97%90%EC%84%9C-CleanUp-%ED%95%A8%EC%88%98