useEffect 클린업 함수 리턴하기

🤨 값이 바뀔 때마다 실행 될 때 생길 수 있는 문제점

근데 만약 useEffect 훅을 통해 백엔드 서버에 요청을 보는 함수를 실행한다면,
입력값이 변경 될 때마다 요청을 보내는 게 맞을까?
➡️ 이럴 때 cleanUp 함수를 사용하면 좋다.

방법

useEffect 훅 함수 안에 return 함수를 넣으면 그게 cleanup !

아래는 입력이 잠깐 멈출 때 유효성 검사를 하기 위한 소스 예제

useEffect(() => {
  const identifier = setTimeout(() => {
    setFormIsValid(
      enteredEmail.includes("@") && enteredPassword.trim().length > 6
    );
  }, 1000);
  return () => {
    // 이전에 실행된 함수에서 생성된 타이머를 삭제한다.
    clearTimeout(identifier);
  };
}, [enteredEmail, enteredPassword]);

원리

useEffect(setup, dependencies?)

useEffect 훅에는 첫번째 매개 변수로 setup 함수가 들어가고
클린업 함수도 선택적으로 리턴하여 줄 수 있으며 순서는 아래와 같다.

1. 컴포넌트가 DOM에 올라감
2. setup 함수 실행
3. 의존성 배열에 포함된 값이 변경됨
4. 이전 값으로 클린업 함수 (리턴함수) 실행 (선택적)
5. 새로운 값으로 setup 함수 실행
6. 컴포넌트 DOM에서 삭제됨
7. 클린업 함수 실행

그래서 값이 바뀔 때마다 3~5가 반복적으로 실행되게 된다.

예시

만약 버튼을 누를 때마다 num이라는 상태의 값이 1씩 더해지는
아래와 같은 로직이 있다고 했을 때 콘솔 로그를 확인해보자!

const [num, setNum] = useState(0);

useEffect(() => {
  console.log(`setup 함수 실행, ${num}`);
  return () => {
    console.log(`클린업 함수 실행, ${num}`);
  };
}, [num]);

const clickHandler = () => {
  console.log(num);
  setNum((prevNum) => prevNum + 1);
};