2-2 Mentor's Tip

• 기존 setState와 마찬가지로 비동기 update
• useState 실행 시 state, setState 한 쌍이 부여됨

3. Effect Hook

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다.

useEffect(function);
useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)

:: How to use useEffect!

useEffect(() => {
	console.log("componentDidUpdate")
})
useEffect(() => {
	console.log("componentDidMount")
	return () => console.log("componentWillUnmount")
}, [])
useEffect(() => {
	console.log("componentDidMount")
	console.log("componentDidUpdate") // + shouldComponentUpdate
	return () => console.log("???")
}, [state])
// WRONG!!
useEffect(() => {
	console.log("CDM 쓰고 싶어요")
}, [])
useEffect(() => {
	console.log("CDU 쓰고 싶어요")
}, [state])