05. LifeCycle & UseEffect

컴포넌트의 LifeCycle

페이지에 장착되기도하고 (mount)

가끔 업데이트도 되고 (update)

필요없으면 제거되고 (unmount)

useEffect

useEffect(() => {},[])

// mount,update(재렌더링)시 코드 실행

  useEffect(() => {
    // 쓸데없는, 오래걸리는 코드는 여기에 적는 것이 관습
    // ex) 어려운연산, 서버에서 데이터 가지고 올 때, 타이머
  });

실행시점 :  html 렌더링이 다 되고나서 실행

return () => {}

clean up function

- useEffect 동작 전에 실행이 됨 

- mount시에는 실행안됨, unmount시 실행됨

4. useEffect 실행 전에 뭔가를 실행 시키려면 return () => {}

5. 특정 state 변경시에만 실행 [state명] 작성

 

clearTimeout();

기존에 있던 요청 삭제시키는 함수 : setTimeout을 취소하는 역할

- 사용

[변수] = setTimeout([함수명], [함수가 실행될 시간]);
   clearTimeout([변수]);

 

 

 

 

참고블로그 : https://xiubindev.tistory.com/100