[React] useEffect로 마운트/언마운트/업데이트시 할 작업 설정

 

 

 

useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법을 알아보자. 

 

마운트 시 하는 작업들 

- props로 받은 값을 컴포넌트의 로컬 상태로 설정

- 외부 API 요청 (REST API등)

- 라이브러리 사용 (D3, video.js 등..)

- setInterval을 통한 반복 작업 혹은 setTimeout을 통한 작업 예약 

 

언마운트 시 하는 작업들 

- setInterval, setTimeout을 사용하여 등록한 작업들 clear하기 (clearInterval, clearTimeout)

- 라이브러리 인스턴스 제거 

 

deps에 특정 값 넣기  

: deps에 특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다.

그리고 deps 안에 특정 값이 있다면 언마운트시에도 호출이 되고, 값이 바뀌기 직전에도 호출이 된다.