$$config title: [ReactJS] useEffect가 실행되는 경우 (mount, update, unmount) keywords: - ReactJS - useEffect - ... $$ # mount (컴포넌트가 처음 생성되었을 때) : 컴포넌트가 화면에 가장 처음 렌더링 될 때 한 번만 실행하고 절대 다시는 실행되지 않음. deps 위치에 빈 배열을 넣는 방식이고 deps(= dependency)가 없다는 것으로 React.js가 지켜볼 대상이 없다는 것을 의미함. [참고]만약에 deps에 배열을 없앤다면 (빈 배열마저 없다면) 리렌더링 될 때마다 useEffect 가 실행됨. ```js useEffect( () => { console.log("I run only once."); ... 실행 코드 ... }, [] ); ``` # update (컴포넌트의 특정 props, state가 바뀔 때) : 특정 데이터가 바뀌었을 때마다 uesEffect 실행함. 특정 데이터는 검사하고 싶은 값으로deps 위치에 특정 데이터를 넣는 방식이고 React.js가 지켜보는 대상의 값이 바뀔 때마다 useEffect를 실행한다는 것을 의미함. 물론 업데이트 될 때 뿐만 아니라 처음 컴포넌트가 생성될 때도 한번 실행됨. [참고] deps 위치에는 검사하고 싶은 props, state 가 여러개가 들어갈 수 있음. ```js const [counter, setCounter] = useState(0); const [keyword, setKeyword] = useState(""); ... 생략 ... useEffect( () => { console.log("I run when counter changes."); ... 실행 코드 ... }, [counter] ); useEffect( () => { console.log("I run when counter & keyword changes."); ... 실행 코드 ... }, [counter, keyword] ); ``` # unmount (컴포넌트가 사라질 때 or update되기 직전에) : 이 경우에는 cleanup 함수 반환(return 뒤에 나오는 함수로 useEffect에 대한 " 뒷정리 함수 ")이 필수!! - unmount될 때만 cleanup함수를 실행하고 싶을 때 (deps 없는 경우) : deps에 빈 배열을 넣으면 됨. ```js useEffect(()=>{ console.log("hi :)"); //cleanup함수반환 return () => console.log("bye :("); },[]); ``` - 특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때 (deps 있는 경우) : deps에 업데이트 되는 것을 검사할 특정값(props, state)를 넣으면 됨. ```js const [counter, setCounter] = useState(0); useEffect( () => { console.log("I run when counter will changes."); return () => console.log("cleanup function"); }, [counter] ); ``` # [참고] cleanup 함수 반환의 형식 (함수화 형식 3가지와 동일) - 방법 1. arrow function ```js useEffect(() =>{ console.log("hi ;)"); return ()=>console.log("bye ;("); }, [] ); ``` - 방법 2. 익명함수 function과 return문 ```js useEffect(function (){ console.log("hi :)"); return function (){ console.log("bye :("); } },[]); ``` - 방법 3. cleanup함수를 직접 만들기 ```js function byeFuc(){ console.log("bye :("); } function hiFuc(){ console.log("hi :)"); return byeFuc; } ```