클린업, clean up 함수, 클린업 함수가 실행되는 경우, useEffect 총정리

 

 

클린업 작업이 필요한 effect

 

useEffect(() => {
    setFormIsValid(
      enteredEmail.includes("@") && enteredPassword.trim().length > 6
    );
  }, [enteredEmail, enteredPassword]);

setFormIsValid()함수는 enteredEmail, enteredPassword가 변경될 때마다 state가 업데이트된다. ==>> 좋지 않다!!

 

함수 컴포넌트 실행이 트리거되서 리액트는 DOM에서 무언가를 변경하는 게 필요한 지 여부를 확인해야 한다. 그래서 enteredEmail, enteredPassword가 변경될 때마다 여부확인은 불필요하다. 

 

내가 하고 싶은 것

1. 일정량의 키 입력을 수집하는 것. 

2. 키 입력 후 일정 시간 동안 일시 중지되는 것을 기다리는 것.

 

=> 사용자가 타이핑하는 동안에는 유효한 이메일 주소나 비밀번호를 확인하지 말고, 사용자가 타이핑을 멈출 때 그때서야 확인한다. 

 

사용자가 다 입력한 것 같으니 한번 확인해보자! => 디바운싱

이것을 setTimeout()과 useEffect를 사용하면 구현하기 쉽다. 

 

useEffect(() => {
    console.log("checking form validity!!");
    setTimeout(() => {
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);
  }, [enteredEmail, enteredPassword]);

 

500밀리초 후에만 이 작업 (유효성 검사)을 수행한다. 

 

근데 위의 코드는 모든 키 입력에 대해 타이머를 설정한거다. 

 

여기서 중요한 것은 타이머를 저장한다는 것이다. 그리고 다음에 키가 입력되면 지운다. 즉 타이머가 한 번에 하나만 실행되도록!

500밀리 초 후에 완료되는 타이머 하나만 생기고, 사용자가 새로 키를 입력해서 타이머를 다시 시작하기까지는 clear되는 것이다. 

 

useEffect(()=>{
	실행시킬 코드
    
    return ()=> {} 👉 여기에 클린업 함수를 써보자
}, [])

 

useEffect 함수가 실행될 때마다 (사실 실행되기 전에), 처음 실행되는 경우를 제외하고 클린업 함수가 실행된다. 

또한 이 클린업 함수는 이펙트를 특정한 컴포넌트가 DOM에서 마운트 해제될 때마다 실행된다. 즉, 컴포넌트가 재사용될 때마다!

 

클린업 함수가 실행되는 경우 정리

1. 모든 새로운 sideEffect 함수가 실행되기 전에 실행된다. 

2. 컴포넌트가 제거되기 전에 실행된다. 

(단, sideEffect 함수가 실행되기 전에는 실행되지 않는다. )

 

 

---

 useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("checking form validity!!");
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);

    return () => {
      console.log("clean up!!!!");
      clearTimeout(identifier);
    }; // 이건 clean up 함수이다.
  }, [enteredEmail, enteredPassword]);

 

위 함수 해석

클린업 함수가 실행될 때마다 클린업 함수가 실행되기 전에 설정된 타이머를 지운다. 

따라서 다음 sideEffect를 실행할 때가 되면 새로운 타이머를 설정할 수 있다. 

즉, 새로운 타이머를 설정하기 전에 마지막 타이머를 지우는 것이다.

 

---

useEffect 총정리

useEffect가 작동하는 방식

 

언제 useEffect의 어떤 부분이 시작되고 실행되는지 꼭 알기!!!

 

 

의존성 배열을 아예 안적는 경우 (빈 배열도 없을때) => 

해당 컴포넌트가 처음으로 렌더링 (처음으로 마운트)되고, 모든 컴포넌트 렌더링 주기 후에 useEffect 안에 있는 함수가 실행된다. 

 

의존성 배열이 비어있을 때 (빈 배열일 때) => 

해당 컴포넌트가 처음으로 렌더링 (처음으로 마운트)될 때만 실행된다. 

(그 이후의 렌더링 주기에는 실행되지 않는다. )

 

의존성을 추가한 경우=> 

컴포넌트가 처음으로 렌더링 (처음으로 마운트) 실행된다. 그리고 의존성 배열에 추가한 state가 변경될 때마다 실행된다. 

 

의존성을 추가한 경우 && 클린업 함수 =>

useEffect 안에 있는 함수가 실행되기 전에 실행된다. 하지만 처음 실행되기 전에는 실행되지 않는다. 

 

의존성 배열이 비어있을 때 (빈 배열일 때) && 클린업 함수 =>

컴포넌트가 제거되면 실행된다. (컴포넌트가 DOM에서 제거 될 때 실행됨) 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓