useEffect는 2개의 인자를 받는데 첫번째는 function으로써의 effect 이다. 두번째 인자는 dependency 리스트이다.
import { useEffect, useState } from "react";
const UseEffectExample = () => {
const [number, setNumber] = useState(0);
const sayHellow = () => {
console.log("hello");
};
useEffect(sayHellow, [number]);
//useEffect는 componentDidMount와 componentWillUpdate이다.
return (
<div>
<div onClick={setNumber(number + 1)}></div>
{/* useEffect 가 sayHello를 component가 nount 되었을 때 실행시켰다.
그리고 number 상태가 바뀔 때 실행시켰다. */}
</div>
);
};
export default UseEffectExample;
//참고: useEffect로부터 function이 리턴된다. 그것이 componentWillUnmoun이다.
//useEffect는 ComponentDidMount, ComponentWillUnMount, ComponentDidUpdate이다.
useEffect
로부터 function
이 리턴된다. 그것이 componentWillUnmoun
이다.
지금은 이에 대한 설명이 없지만 다음 hooks 블로그에서 다룰 내용이다.
useEffect
는 ComponentDidMount
, ComponentWillUnMount
, ComponentDidUpdate
이다.