State Lifecycle, useEffect

State 생명주기(Lifecycle)이란 컴포넌트가 실행되거나 수정되거나 제거될 때 허출되는 메서드이다

componentDidMout(){
	console.log("화면이 렌더링 되고 실행!")
	}

componentDidUpdate(){
	console.log("props, state같은 값이 변경되면 실행")
	}
    
componentWillUnmount(){
	console.log("컴포넌트가 사라질때 즉 화면이 이동될때 실행")
	}

위와같이 작동을 하게 된다 그럼 함수형 컴포넌트에게는 이런게 없을까??
물론 존재한다

바로 useEffect 이다

useEffect(()=>{
		console.log("화면이 렌더링 되고 실행!")
	},[])
// setState가 리랜더링 시켜도 작동 안함!!!
// useEffect 안에서의 setState는 예외
// componentDidMout와 비슷하다

useEffect(()=>{
		console.log("화면이 렌더링 되고 실행 및 []안에 있는게 수정, 실행 될때마다 실행")
	},[state])
// componentDidMout, componentDidUpdate가 합쳐 졌다고 생각하자

useEffect(()=>{
		console.log("뭐 마우스가 움직이거나 뭐 하나라도 바뀌면 실행!!")
	})
// 즉 무한으로 계속 실행될 수 있다!

useEffect(()=>{

		return(()=>{
			console.log("componentWillUnmount와 비슷하게 작동!!")
		})
	},[])
// return 위에 값을 넣으면 다른 방법들과 혼용하여 사용 가능하다

useEffect에서 []은 의존성 배열로 있고 없고의 차이의 변화가 큼으로 잘 사용해야 한다

또한 useEffect 안에서 setState의 사용시에는 무한 루프 (state 변경 -> 리랜더 -> state 변경....)이 될수 있으니 정말 필요한 경우가 아니라면 지양하자