008. useEffect

useEffect = React의 생존주기와 관련이 있는 함수 = 동기화의 역할을 생각하면 된다.

화면에 render가 될 때 기준이며, mount시와 unmount시의 동작을 정할 수 있다.

포맷은 다음과 같다.

useEffect(()=>{
	//mount시의 동작
    return (
    	//unmount시의 동작
    );
},[{/*deps*/}])

 

mount 동작 예시

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

unmount 동작 예시

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

deps

dependencies list (의존성 리스트)의 줄임말이며, 저 사이에 useEffect안에서 사용할 값을 넣어주면, 해당 값이 변할 때 다음 주기로 넘어가게(컴포넌트를 갱신하게) 설정할 수 있다.

useEffect(()=>{
	//mount시의 동작
    return (
    	//unmount시의 동작
    );
})

생략하여 위와 같이 쓰게 되면, 리렌더링 될 때마다 실행되게 된다.