[React Hook] useEffect를 알아보자

[2022.01.05]

훅 정리 다시 하면서 한번더 정리해보는 useEffect

useEffect(()=>{ 함수() }) // 렌더링 될 때마다 함수 실행

useEffect(()=>{ 함수() },[]) // 처음 렌더링 될때만 함수 실행

useEffect(()=>{ 함수() },[함수]) // 디펜던시 값이 변경될 때마다 실행

useEffect(()=>{
	return()=>{
    	// clean up(정리)
        // 해당 컴포넌트가 unMount 될때, 다음 렌더링 될 useEffect가 실행되기 전에 실행
    }
},[])

clean up 예제

function App(){
     ...
     return (
         <div>
             {state && <Interver/>} 
         </div>
     )

}

...

function Interver(props){
	useEffect(()=>{
    	const interver = setInterval(()=>{
    	console.log('시작');
  	  }, 1000);
      
      return ()=>{ // 해당 컴포넌트 unMount시 실행
      	clearInterval(interver);
        console.log('종료');
      }
    },[])
    ...
}

 

요약

1. 의존성배열 자체가 없으면 렌더링 마다 실행
2. 의존성배열이 빈값이면, 처음 렌더링 할때만 1번 실행
3. 의존성배열에 값이 있으면, 값이 변경될때마다 실행
4. return 내부에 정의된 함수는, 해당 컴포넌트 unMount시 실행

* 자주 변경되는 값을 의존성배열에 넣는순간 무한루프 빠지기 쉽다는것을 명심한다. 

 

 

---

[2022.09.10]
useEffect 예제

console.log("render");

 

const [isBgColorRed, setIsBgColorRed] = useState(false);

<div className={`pa40 ${isBgColorRed ? "bg-red" : ""}`}>
    <button
      className={`base-btn `}
      onClick={() => {
        setIsBgColorRed(!isBgColorRed);
      }}
    >
      버튼클릭시 색상 변경
    </button>
</div>

 

useEffect는 렌더링 직후마다 실행된다.

렌더링(Rendering)은 DOM요소가 변경될 때, 클래스기반 메서드나 돔 생성 함수가 호출될 때를 말한다.

 useEffect(() => {
    console.log("render");
  });

 

마운트 될 때만 실행하고 업데이트 될 때는 실행하지 않으려면, 뒤에 의존성 배열을(디펜던시) 빈 상태로 넣어준다.

마운트(Mount)는, 리액트가 첫 렌더링을 수행하고, 처음으로 DOM을 그릴 때를 말한다.

 useEffect(() => {
    console.log("render");
  },[]);

 

특정 값이 바뀔때만 실행시키고 싶다면, 디펜던시에 바라볼 값을 넣어준다.

 useEffect(() => {
    console.log("render");
  },[isBgColorRed]);

 

값을 업데이트하기 직전에 실행시키고 싶다면 Cleanup 함수를 반환해준다

useEffect(() => {
    console.log("바꾼다!");
    console.log("빨간색인가?", isBgColorRed);
    return () => {
      console.log("값 바뀌기전에 출력");
    };
});

 

 

조건문을 달때는?

cleanup 함수가 매번 실행되지않도록 조건을 만족하지 못하면 바로 반환하자.

 

 useEffect(() => {
    if (isBgColorRed === false) return;
    console.log("true 일때만 출력할거야", isBgColorRed);
    return () => {
      console.log("값 바뀌기전에 출력");
    };
  }, [isBgColorRed]);