useEffect와 cleanup에 대해 알아보자.

useEffect란?

• React Hook 중 하나로, 사이드 이펙트를 처리하기 위한 함수이다.
• 인수로 실행할 함수, 의존성 배열을 받는다.
• 다음의 조건을 만족할 시, 인수로 받은 함수가 실행된다.
  • 상위 컴포넌트가 처음 mount 되었을 시
  • 의존성 배열 요소의 값이 변경될 때

import { useEffect } from 'react';

const Component = (props) => {
  
	useEffect(() => {
      // 실행할 Logic을 여기 작성한다.
    }, []); // 여기 배열에 의존성을 추가한다.
  
  	...

React의 사이드 이펙트란?

• React의 주요 역활은, UI를 렌더링하고, 유저 동작에 의해 반응하는 것이다.
  • JSX 요소를 검증하고, 렌더링하기
  • State와 Props를 관리하기
  • 사용자 이벤트를 처리하고, 반응하기
• 그 외 애플리케이션에서 일어나는 모든 기능을 사이드 이펙트로 분류한다.
  • 백엔드에 http 리퀘스트 보내기
  • 쿠키, 세션 저장소에 데이터 보관하기
  • 타이머 설정 및 관리하기

useEffect를 언제 사용할까?

• 앞서 말했듯이, 모든 '사이드 이펙트'를 처리하기 위해 사용한다.
• useEffect를 사용하지 않으면, 함수가 렌더링 될 때마다 기능이 재실행된다.
  • 만약 password 검증할 때, password가 아닌 id가 바뀌어도 다시 검증한다.
  • http request 보낼 때, id 값이 바뀔 때마다 새로운 request를 보낸다.

---

cleanup 이란?

• cleanup은 useEffect에 인자로 준 함수가 반환하는 함수를 말한다.
• 다음의 조건을 만족할 시, 함수가 실행된다.
  • useEffect의 함수가 실행되기 직전
    (즉, cleanup 함수 실행 후에, 함수의 logic이 실행된다.)
  • 컴포넌트가 DOM에서 unmount될 때

import { useEffect } from 'react';

const Component = (props) => {
  
	useEffect(() => {
      ...
      
      return () => {
        ... // cleanup 함수를 여기 작성한다.
      };
    }, []);
  	
  	...

cleanup을 언제 사용할까?

1. 디바운싱 (Debouncing)을 구현할 때

• 만약 ID와 Password를 검증할 때, 매번 바뀔때마다 검증하는 것은 비효율적이다.
• 그렇다면 사용자가 입력을 멈췄을 때 같이, 한꺼번에 값을 모아서 검증하는 것이 디바운싱이다.
• 아래 코드에서, cleanup을 이용해 디바운싱을 구현하였다.
  • ID, PW 입력시 500ms 후에 검증하도록 timer를 설정하였다.
  • 이 때, 입력 중에는 cleanup 함수가 먼저 실행되 이전 timer를 삭제한다.
  • 입력을 멈추면, 마지막에 설정된 timer 함수가 대기를 마쳐 ID, PW를 검증한다.

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

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

2. 사용한 자원을 정리할 때

• 컴포넌트가 unmount 됬을 때, 사용한 자원을 청소한다.
• WebSocket를 활용한 구독이나, setInterval을 사용한 경우, 함수가 unmount되도 계속 실행되기 때문에 청소해야 한다.