[React] useEffect cleanup

useEffect는 class 생명주기 메서드인 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것이다.

이중 컴포넌트가 사라질 때(componentWillUnmount) 특정 작업을 처리하는 방법에 대해 알아보자.

  useEffect(() => {
    console.log('EFFECT RUNNING');
    
    return () => {
      console.log('EFFECT CLEANUP');
    };
  });

사용법은 간단하다 return 안에 eeffect 이후에 어떻게 정리(clean-up) 할 것인지 표시하면 된다.

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

    return () => {
      clearTimeout(identifier);
    };
  }, [enteredEmail, enteredPassword]);

위 코드는 유효성 검사를 할 때 사용자의 입력이 끝나고 500 밀리 세컨드가 지난 후 유효성 검사를 실행하는 코드이다.

cleanup을 이용하면 클로저의 메모리 해제를 통해 최적화를 한다거나 네이버같이 검색어 자동완성 기능을 구현할 때 백엔드 통신 횟수를 줄여 서버의 과부하를 막을 수 있다.