작성자가 Vue를 사용하는 사람이다 보니 작성시점이 Vue 기준으로 비교를 하게 됩니다.

---

react의 useEffect는 Vue의 라이프사이클 훅과 같은 역할을 하는 것 같다.

다음과 같은 함수가 있다고 하자.

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

  const handleClick = () => {
    setNum(num+1);
  };

  useEffect(()=>{
    handleClick();
  },)

  useEffect(()=>{
    handleClick();
  },[])

  useEffect(()=>{
    handleClick();
  },[num])

  useEffect(()=>{
    return () => {handleClick();}
  },[])

  return (<div><div onClick={handleClick}>{num}</div></div>)
}

useEffect는 Vue에서의 mounted와 updated, destroyed, watch의 역할을 겸한다.

useEffect는 2개의 parameter를 받을 수 있는데

첫번째 값으로는 callback을 받고, 두번째 값으로는 deps, 의존값이 들어있는 배열이다.

deps

이해를 돕기 위하여 두번째 parameter를 먼저 이야기하는 것이 좋을거 같아서 순서를 바꿨다.

useEffect는 Vue에서의 mounted와 updated, destroyed, watch의 역할을 겸하기 때문에 이를 위한 조절을 deps로 하게된다.

deps에 아예 값을 주지 않을 경우 (updated)

이 경우에는 화면이 렌더링 되는 순간마다 callback이 호출된다.

deps에 빈배열([])을 줬을 경우 (mounted)

이 경우에는 컴포넌트가 맨처음 렌더링 되었을 때만 호출된다.

deps에 빈배열([])이 아닌 값이 들어있는 배열을 줬을 경우(watch)

이 경우에는 배열 안에 들어있는 값이 변화되었을 때 호출된다.

callback

destroyed에 대한 설명은 어디가고 갑자기 callback으로 건너뛰나 생각할 수 있지만
destroyed에 대한 설명을 하려면 callback에 대해 이야기하여야 한다.

callback은 일반적인 callback의 형태를 이루고 있으나 다음과 같은 경우에는 특이사항이 있다.

deps에 빈배열([])을 준 상태로 calback이 함수를 return하는 경우

useEffect(()=>{
	//mounted
    console.log("mounted");
    return ()=> {
    		//destroyed
   			console.log("destroyed");
       	}
  },[])

이럴 경우 callback의 return에 해당하는 함수가 Vue의 destroyed 역할을 한다.

그리고 이것을 react에서 cleanup이라고 한다.