[React]useEffect

useEffect

• 라이프 사이클 훅을 대체 할 수 있다

• componentDidMount
• componentDidUpdate
• componentWillunMount

하지만 말 그대로 대체할 수 있는거지 동등한 역할을 한다라고는 볼 수 있습니다.
여러가지 기능을 하지만 그 중 이 3가지의 역할을 대체 할 수 있습니다.

React.useEffect(() => {
	console.log("componentDidMount & componentDidUpdate", count)
})

이렇게 되면 최초 화면에서 실행되고 count가 업데이트 되었을때 실행이 됩니다.

React.useEffect(() => {
	console.log("componentDidMount & componentDidUpdate", count)
}, []) //배열 형태로 인자를 받는다.

이것이 무엇을 의미하냐면 React.useEffect에서 실행되는 타이밍을 조절할때 [] 즉, list of dependencies를 사용하는것입니다.

[] 이 없을때는 항상 랜더가 된 직후에는 무조건! 이 함수를 실행해줘 를 의미합니다.
[]가 있을때에는 최초에만 실행이 된다라고 선언이 되는것입니다.
[] 에서 인자를 받아서 이 값이 변할때 return 될때 그 직후에 이 useEffect를 실행해주세요라는 역할을 합니다.

현재는 [] 안에 아무것도 없기 때문에 이 함수는 최초 말고는 다시 실행될 수 없습니다.
즉 []이 없기 때문에 componentDidUpdate가 아닌 Mount가 되는것입니다.

React.useEffect(() => {
	console.log("componentDidMount", count)
}, [])

---

3가지중 componentWillUnMount를 실행하려면 함수가 함수로만 끝날게 아니라 안에 return을 하도록 해주면 되는데 이것을 전문용어로 cleanup이라고 합니다.

React.useEffect(() => { // 2. 이것이 실행될 때
	console.log("componentDidMount & componentDidUpdate", count) // 4. 이것이 실행됩니다.
  
  	return () => { // 3. 직전에 이것이 실행되고
    	//cleanup
    }
}, []) //  1. 이것에 의해서

return 부분은 다음랜더 list of dependencies에 의해서 useEffect가 실행될 때 그직전에 return을 실행되고 console 위치의 부분을 실행합니다.

마찬가지로 []안에 인자를 받지 않았기 때문에 최초에만 실행됩니다.
cleanup이 일어나게 된다면 페이지가 사라질때 말고는 함수가 실행될 수 없게 됩니다.
그러면? useEffect가 현재 componentWillUnMount의 역할을 해주고 있다는 뜻이 됩니다.

시나리오로 보자면