React Lifecycle
- Mount
- Update
- UnMount
Mount
- Dom이 생성되고 웹브라우저상에 나타는 것
- 컴포넌트 생성
- constructor
- 컴포넌트가 새로 생성될 때 마다 호출되는 클래스 생성자 메서드
- getDerivedStateFromProps
- props에 있는 값을 state에 동기화 하는 메서드 (componentWill)
- render
- UI 렌더링 메서드
- componentDidMount
- 컴포넌트가 브라우저에 그려진 후 호출되는 메서드
Update
update가 일어나는 상황
- props, state가 바뀔때
- 부모 컴포넌트가 re-render될 때
- this.forceUpdate로 강제로 렌더링 트리거 할때
순서
- getDerivedStateFromProps
- shouldComponentUpdate
- 컴포넌트가 virtual dom을(update를 할지말지) 그릴지 말지 결정한다.
- false 리턴시 update가 중단된다. (default true)
- render
- getSnapshotBeforeUpdate
- Dom에 반영되기 직전에 호출된다
- componentDidUpdate
Unmount
- componentWillUnmount
- 브라우저에서 사라지기 전에 호출된다.
- render
- 컴포넌트 모양새 정의
- constructor
- 컴포넌트 최초 생성시 호출
- 초기 state 정의
- getDerivedStateFromProps (16)
- props를 state에 동기화 시키는 작업
- 마운트, props update시
static getDerivedStateFromProps(nextProps, prevState) { if(nextProps.value !== prevState.value) { return { value : nextProps.value }; } return null; }
- componentDidMount
- 첫 렌더링은 마친 후 실행된다.
- 이벤트 등록, 비동기 작업 처리
- shouldComponentUpdate
- props, state가 변경됬을 때, 리렌더링 여부를 결정한다.
shouldComponentUpdate(nextProps, nextState) {...}
- getSnapshotBeforeUpdate (16.3)
- render 호출 후 dom에 변화를 반영하기 바로 직전에 호출되는 메서드
- 반환하는 값은 componentDidUpdate에서 세번째 파라미터인
snapshot
으로 전달 받을 수 있다. - 업데이터 직전 값을 참고할 일이 있을때 사용된다.(ex)스크롤바 위치유지)
getSnapshotBeforeUpdate(prevProps, prevState) {...}
- componentDidUpdate
- 리렌더링 완료 후 실행된다.
- DOM 처리 가능
componentDidUpdate(prevProps, prevState, snapshot) {...}
- componentWillUnmount
- 컴포넌트가 제거될 떄 실행된다.
- componentDidMount에서 등록된 이벤트 제거 등
'Front-End > React' 카테고리의 다른 글
Immutable.js (0) | 2018.09.14 |
---|---|
Container components and Presentational components (0) | 2018.09.14 |
Reconciliation (0) | 2018.08.09 |
[React] HOC (0) | 2018.08.02 |