Hooks는 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. https://ko.reactjs.org/docs/hooks-effect.html

Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행 할 수 있다.

• side effect - 데이터를 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하기 까지의 모든것 , side effect or effect

Effect hook, useEffect는 컴포넌트가 마운트 되었을때 (very first time), 언마운트 되었을때,(when it is gone). 특정 props가 바뀌면서 업데이트 될때 처리하는 기능을 정의 할 수 있다.

React class 의 componentDidMount , componentDidupdate, componentWillUnmount와 같은 목적으로 제공된다.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 비슷합니다  
	useEffect(() => {    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다    
			document.title = `You clicked ${count} times`;  
	});
	return (
	    <div>      
					<p>You clicked {count} times</p>      
					<button onClick={() => setCount(count + 1)}>Click me</button>    
			</div>
		);
}

위의 코드의 출처는 https://ko.reactjs.org/docs/hooks-effect.html

useEffect 는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 deps 을 받는다.

useEffect(() ⇒ {
	console.log('렌더링 될 때 마다 실행')
})

배열을 생략한다면 ⬆