18. state의 lifecycle(생명주기)

컴포넌트의 생명 주기

컴포넌트의 생명 주기는 크게 4단계로 나뉩니다.

 

1. Rendering

2. Rendering 후

3. Rendering 후 State의 변경

4. Rendering 후 닫기 혹은 이동

 

이렇게 4단계로 나눌 수 있으며 각각에 경우에 해당할 때 클래스는 componentDidMount, componentWillUnmount 등을 사용해서 함수는 useEffect를 사용해서 이 때마다 함수를 실행하는 것 또한 가능 하다.

 

예시 코드 - Class 컴포넌트

예시 코드 - Function 컴포넌트

위의 예시처럼 나타낼 수 있습니다.

 

각 주기마다 실행하려면 써야하는 메서드 

	Class	Function
렌더링	componentDidMount	useEffect
State값이 바뀌었을 때	componentDidUpdate	useEffect
종료 혹은 이동	componentWillUnmount	useEffect