# Effects

📌 useEffect

• state가 변화하면 모든 component가 리렌더링 된다.

• 리렌더링 될 때마다 코드를 다시 실행하지 않고, 특정 요소가 render 될 때만 코드를 실행하고 싶을 때 useEffect를 사용한다.
  ex. API 불러올 때 : 처음 한번만 불러오면 됨. state가 변화할 때마다 다시 가져올 필요 없음.

useEffect( function, [ deps ] )

deps 부분에는 변화를 감지할 특정 요소를 적어준다.
그럼 deps가 변할 때에만 function이 실행된다.

⭐️ deps 부분을 비워두면 함수가 처음만 실행되고 이후에는 state가 변화해도 다시 실행되지 않는다.

useEffect를 사용할 때는 useState와 마찬가지로 import 해준다.

import {useEffect} from 'react';

예제 1 : 처음 한 번만 실행하기

import {useEffect} from 'react';

const iRunOnlyOnce = () => {
	console.log("Call the API");
}
useEffect(iRunOnlyOnce, [])

// 합쳐서 아래처럼 써도 됨.
useEffect(()=>{
	console.log("Call the API");
},[])

예제 2 : keyword가 변할 때만 실행하기

const [keyword, setKeyword] = useState("");
const onChange = (event) => setKeyword(event.target.value);
useEffect(()=>{
	if(keyword !== "" && keyword.length > 5){
    	console.log("Search for", keyword);
    }
},[keyword]); // keyword가 변화할 때만 코드 실행됨.
return(
	<div>
	 <input
       value = {keyword}
       onChange = {onChange}
     />
	</div>
)

💡 참고

: deps는 여러개도 가능하다.
ex) useEffect(function, [keyword, value, input])

📌 Cleanup function

• component가 destroy될 때 뭔가 할 수 있도록 해줌.
  ex) component가 사라질 때 어떤 분석 결과를 보내거나 event listener를 지우는 등
• 자주 사용하지는 않음.

예제

function Hello(){
	useEffect(()=>{
    	console.log("created");
        // cleanup function
        return () => console.log("destroyed"); 
    },[]);
	return <h1>Hello</h1>;
}
function App(){
	const [showing, setshowing] = useState(false);
	const onClick = () => setShowing((prev) => !prev);
    return(
     <div>
        {showing ? <Hello /> : null}	
        <button onClick = {onClick}>{showing ? "hide" : "show"}</button>
     </div>
    )
}