[react/js]react hook page loaded 이벤트(useEffect)

[nextjs+ts]react hook page loaded 이벤트(useEffect)

 

#windows 개발의 loaded 같은 이벤트

#react의 componentdidmount 와 같은 이벤트

 

react hook에서는 useEffect 이다

 

#정의부 첫번째 인자는 콜백함수를 구현하며, 두번째 인자는 영향받을 객체의 배열를 저장한다.

아무것도 넣지않으면, 전체 적용, 빈 배열([])을 넣으면 아무것도 적용하지 않은 것이니 최초의 1번만 실행한다.(loaded개념)

function useEffect(effect: EffectCallback, deps?: DependencyList): void;

 

#사용법 - 마지막 인자에 []을 넣음으로써 최초 1번만 수행한다.

  useEffect(() => {
    setTimeout(() => {
    	console.log('3초가 지났습니다');
    }, 3000);   
  }, []);

 

 

#react #html #css #리액트 #ts #typescript #javascript