프론트엔드
18. state의 lifecycle(생명주기)
버밀이
2023. 4. 7. 09:30
컴포넌트의 생명 주기
컴포넌트의 생명 주기는 크게 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 |