📚 Reference

• 참고 자료 1

📜 Chapter

useEffect

useDidMountEffect

• useDidMountEffect

• useEffect 첫 렌더링 시 함수 호출 막기

• useEffect를 사용하는 이유 중 하나는 특정 stae가 변하는 경우에 함수를 호출하고자 할 때 사용한다.

• 하지만 첫 렌더링 때도 state가 설정되는 것으로 보고 useEffect가 실행될 때가 있다.

• useDidMountEffect

  import { useRef, useEffect } from "react";
  
  export const useDidMountEffect = (func: any, deps: any) => {
  	const didMount = useRef(false);
  	
  	useEffect(() => {
  		if(didMount.current){ 
  			func();
  			}else{
  			didMount.current = true;	
  		}
  	}, deps)
  }
  

예시

• useDidMountEffect 사용한 예시