리엑트 입문 7 - useEffect()

useEffect 소개

1. 컴포넌트가 마운트 됐을 때 (처음 랜더링 될때)
2.언마운트 됐을 때 (사라질 때)
3.업데이트 될 때 (특정 props가 바뀔 때)

useEffect 구조

useEffect(() => {
    // 처음 마운트 됐을때 실행
    return () => {
    // unmount됐을 때 실행
    };
  }, [user]); 
  
  
  와 같은 구조를 지니고 있으며, [user]로 할 경우, user가 바뀔 때 마다 실행됩니다.
  [] 로 할 경우 마운트 될 때에만 실행되고, 실행되지 않습니다.

useEffect 사용 예

마운트 시에 하는 작업들

props 로 받은 값을 컴포넌트의 로컬 상태로 설정
외부 API 요청 (REST API 등)
라이브러리 사용 (D3, Video.js 등...)
setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약
이벤트 리스너 등록하기

언마운트 시에 하는 작업

setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
라이브러리 인스턴스 제거
이벤트 리스너 제거하기

참고 자료 : https://react.vlpt.us/basic/16-useEffect.html