[React] useEffect

✅ useEffect

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

[Syntax]

useEffect(function);

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

[useEffect vs. CDM/CDU]

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])