React Life Cycle

React의 Life Cycle인 생명주기에 대해서 알아 보자. React에는 Component가 생성 되고 소멸 될 동안 단계별로 Component를 컨트롤 할 수 있도록 여러 메소드들이 있는데 우리는 그 메소드들을 오버라이드 해서 사용 할 수 있다.

The Component Lifecycle

Component 의 Lifecycle 은 크게 이렇게 나누어 살펴 볼 수 있다.

 

Mounting

Component의 인스턴스가 생성되고 DOM의 삽입 될때 과정이다. 이 순서대로 진행 된다.

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

원래는 static getDerivedStateFromProps() 대신 componentWillMount() 가 들어갔지만 지금은 레거시로 간주 되어 사용하지 않는 것을 권장하고 있습니다. 

Update

Props 나 State가 변화가 일어났을때 과정이다. 이 순서대로 진행 된다.

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

아래에 있는 메소드 역시 레거시로 간주 하는 메소드들이다.

• componentWillUpdate()
• componentWillReceiveProps()

Unmounting

Component가 DOM에서 제거 될 때 호출 되는 메소드이다.

• componentWillUnmount()

Error Handling

Life cycle 메소드나 하위 컴포넌트의 생성자에서 오류가 발생하면 호출 되는 메소드이다.

• componentDidCatch()

 

 

https://reactjs.org/docs/react-component.html

React.Component – React