[React] Component Lifecycle

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

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

React 컴포넌트는 라이프 사이클을 가지며, 라이프 사이클에 따라 호출되는 메소드들이 있다.

 

 

생성

생성시에 호출되는 메소드는 아래와 같으며, 한번만 호출된다.

 

메소드	호출시기 및 기능
constructor(props)	객체 생성시 초기 state 설정, 입력된 props를 이용하여 state 설정가능
componentWillMount()	DOM에 마운트되기 전
static getDerivedStateFromProps(props, state)	props 입력시 입력된 props를 이용하여 state 변경, 반환값은 변경될 state 객체
render()	랜더링시
componentDidMount()	DOM에 마운트된 후

 

 

갱신

컴포넌트가 갱신될때, 호출되는 메소드이다.

 

메소드	호출시기 및 기능
componentWillReceviceProps(nextProps)	새로운 속성이 입력될 시 내부에서 setState() 호출가능
static getDerivedStateFromProps(props, state)	props 변경시, 부모 랜더링시 입력된 props를 이용하여 state 변경 setState()를 직접 호출하지 않고, 변경할 state 객체를 반환하면 변경됨
shouldComponentUpdate(nextProps, nextState)	state 변경시 컴포넌트의 랜더링 필요 여부에 따른 Boolean 반환
componentWillUpdate()	갱신 전
render()	랜더링시 강제갱신(forceUpdate)되면, render()부터 호출
getSnapshotBeforeUpdate(prevProps, prevState)	갱신 전
componentDidUpdate(prevProps, prevState, snapshot)	갱신 후

 

 

소멸

컴포넌트가 소멸되면 아래의 메소드가 호출된다.

 

메소드	호출시기 및 기능
componentWillUnmount()	소멸 전