[React] Hook 👉 useEffect

1. useEffect란?

componentDidMount(), componentDidUpdate(), componentWillUnmount() 의 역할을 한다.
상태값이 변경되었을 때 동작하는 함수를 작성할 수 있다.

// 매번 함수가 호출된다. 
useEffect(() => {
	console.log("change");
})

// 위의 상황을 방지하기 위해서
// 두번째 매개변수로 배열을 전달한다. (의존성배열)
// -> count에 변화가 있을 때만 함수가 실행된다 .
useEffect(() => {
	console.log("change");
}, [count]);

정리하자면

useEffect(() => {
	함수
}, [의존성배열])

2. 특징

• 상태값이 변경되고 다시 렌더링된 다음에 호출된다.
• 두번째 매개변수로 배열을 입력하면, 배열의 값이 변경되는 경우에만 함수가 호출된다. 이것이 의존성 배열이다.
• 렌더링 직후에 한 번만 실행되는 작업은 [] 빈 배열을 사용한다.

3. 사용하는 경우

• API를 호출할 때 사용한다.
• 이벤트 처리 함수를 등록하고 해제할 때 사용한다.