State Lifecycle

변수의 생명 주기

변수는 선언에 의해 생성되고 할당을 통해 값을 가지고 변화하며 언젠간 소멸하게 된다.
이를 변수의 생명주기(life cycle)이라고 한다.

변수는 생명주기를 통해 종료되는 시점이 있어야 메모리 공간을 영원히 차지하지 않게 된다.

1) 그리기 → render
2) 그리고 난 뒤 실행 → componentDidMount
3) 그리고 난 뒤 변경 후 실행 → componentDidUpdate
4) 그리고 난 뒤 사라진 후 실행 → componentWillUnmount

함수형 컴포넌트의 생명주기 훅 useEffect

함수형 컴포넌트에서는 useEffect를 사용해 클래스형 컴포넌트와 같이 생명주기 메서드를 적용할 수 있다.

componentDidMount

//** 의존성 배열**[]**에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 됩니다.(1번만 실행)
useEffect(()=>{
		console.log("마운트 됨!!")
	},[])

componentDidUpdate와 비슷

// 의존성 배열이 없기 때문에 뭐 하나라도 바뀌면 무조건 다시 실행됩니다.
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	})
// someState가 수정될때만 리렌더 해주기
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	},[someState])```

componentWillUnmount

useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
		//이부분이 끝나고 진행할 것들
		return(()=>{
			console.log("여기서 나갈래요!!")
		})
	})

useEffect의 실행 시점

→ 생명주기 메서드, 훅은 기본적으로 렌더(화면그리기) 이후에 실행된다. 따라서 useEffect와 lifecycle 메서드는 렌더 이후에 실행된다.