👉 useEffect 란?

• Hook을 사용하여 컴포넌트가 마운트(처음 나타났을 때) 됐을 때 , 언마운트(사라질 때) 됐을 때 , 그리고 업데이트 될 때 특정 작업을 처리하는 방법

1. 마운트(처음 나타났을 때)시 하는 작업 :

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

2. 언마운트(처음 나타났을 때)시 하는 작업 :

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

특정 DOM 선택시 사용.

• useEffect 를 사용 할 때, 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열(deps)을 넣는다.

• 만약, 배열(deps)을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다.

• useEffect에서는 함수를 반환 할 수 있음 = cleanup 함수

  • cleanup 함수는 useEffect에 대한 뒷정리를 해준다고 보면 됨.
  • deps가 비어있는 경우, 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

참고