본문 바로가기
FRONTEND/React

React - React lifecycle methods 정리

by 또야또야 2020. 5. 16.
반응형

Lifecycle methods

1. type component가 만들어질 때 실행 ( 기본 state를 설정할 수 있음 )
2. componentWillMount() component가 DOM에 렌더링전 실행 ( DOM 처리를 할 수 없음 )
3. render  
4. componentDidMount() component 결과가 DOM에 렌더링 된 후 작동
( 다른 js 프레임워크 연동 및 setTimeout, setInterval 및 AJAX 사용, DOM 처리 가능 )
5. componentWillReceiveProps() 새로운 props를 받았을 때, props에 따라 state를 업데이트할 때 유용 ( setState 가능 )
6. shouldComponentUpdate(nextProps, nextState) component가 DOM에 업데이트를 할지 말지 정하는 부분
props/state가 변경되었을 때 리렌더링을 할지 말지 정함
실제로 사용시 필요한 비교를 하고 값 반환 필요


return nextProps.id !== this.props.id // true/false

JSON.stringify를 사용하여 여러 field 비교 가능
7. componentWillUpdate() component가 DOM에 업데이트 되기 전 실행
( setState 사용 X -> 무한루프 )
8. componentDidupdate() component가 DOM에 업데이트 후 실행
( setState 사용X )
9. componentWillUnmount() component가 제거 될 때 실행 되는 메서드

unmount componentWillUnmount()
props를 받았을 때(처음) componentWillReceiveProps()
props가 업데이트 될 때
omponentWillUpdate
render
componentDidUpdate

 

반응형

댓글