[React.js] Life Cycle

- 수명주기 (Life Cycle) 

 : 컴포넌트가 생성되고 소멸될 때 발생하는 일련의 이벤트

 : 컴포넌트 초기화, 렌더링, 업데이트, 소멸 등의 작업을 수행한다.

 

1. 마운트 ( Mounting)

 1) constructor() : 컴포넌트 생성 시 호출, 초기 상태 설정, 메소드 바인딩

 2) static getDerivedStateFromProps() : props 로부터 상태를 '동기적' 업데이트 ( v16.3 이후 도입 )

 3) render() : UI 렌더링

 4) componentDidMount() : 컴포넌트 DOM 마운트 이후 호출, 네트워크 요청, 초기 데이터 로딩

 

2. 업데이트 ( Update )

 1) static getDerivedStateFromProps() : props 동기적 업데이트

 2) shouldComponentUpdate() : 리렌더링 여부 결정, 성능 최적화

 3) render() : 컴포넌트 UI 업데이트

 4) getSnapshotBeforeUpdate() : 컴포넌트 업데이트 직전 호출, DOM상태 기반 작업 수행

 5) componentDidUpdate() : 컴포넌트 업데이트 완료 이후 호출, 이전 / 현재 상태 비교 및 추가 작업 수행

 

3. 언마운트 ( Unmounting )

 1) componentWillUnmount() : 컴포넌트가 DOM 에서 제거되기전에 호출, 이벤트 리스너 해제, 타이머 해제

 

4. 에러처리 ( Error Handling )

 1) static getDerivedStateFromError() : 자식 컴포넌트 에러 처리

 2) componentDidCatch () : 에러처리