React Lifecycle, Event

React도 Angular와 마찬가지로 Lifecycle이 있다.

class로 만들 때 사용가능 하며, velopert 블로그를 보고 정리한다.

컴포넌트가 브라우저에 나타나기전

constructor

• 컴포넌트가 새로 만들어질 때
   

componentWillMount
  - 컴포넌트가 화면에 나타나기 직전
  - 더 이상 필요하지 않아 16.3 부터 deprecated
  - UNSAFE_componentWillMount()

 

componentDidMount
   - 컴포넌트가 화면에 나타났을 때

  - 외부라이브러리 연동, 데이터 요청, 속성 변경등등 작업

컴포넌트 업데이트 (props, state의 변화에 따라)

componentWillReceiveProps
  - 컴포넌트가 새로운 props를 받을 때
  - state가 props에 따라 변해야하는 로직 (setState를 통해 변경해야함)
  - 더 이상 필요하지 않아 16.3 부터 deprecated
  - UNSAFE_componentWillReceiveProps()

[NEW] static getDerivedStateFromProps()
  - 16.3 이후 생김 componentWillReceiveProps 대신
  - props로 받아온 값을 state로 동기화 하는 작업을 해줘야 할 때

shouldComponentUpdate
  - 컴포넌트를 최적화 하는 작업
  - props나 state 둘중에 하나만 변경되도 작동
  - newProps newState를 인자로 해서 호출
  - return true, false
 

componentWillUpdate
   - 더 이상 필요하지 않아 16.3 부터 deprecated.
   - shouldComponentUpdate에서 true일 때만 작동
   - 여기에서 setState를 사용하면 안된다.

[NEW] getSnapshotBeforeUpdate()

  - componentWillUpdate 대신
  - DOM변화가 일어나기 직전의 DOM 상태를 가져옴
  - 발생하는 시점 :  render(), getSnapshotBeforeUpdate(), 실제 DOM변화 발생, componentDidUpdate

componentDidUpdate
  - getSnapshotBeforeUpdate에서 리턴값을 3번째 파라미터로 받을 수 있다.
   -  render()가 호출하고난 후

 

 

컴포넌트 제거
 

componentWillUnmount
  - 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거

 

컴포넌트 에러 처리

componentDidCatch

EVENT를 넘길 때 

<button onClick={this._rollback}>회춘<//button>
private _rollback(): void{
this.setState({ // setState 말고 mobX를 사용하자!
age: 25
});
}

construct() {
this._rollback = this._rollback.bind(this);
}