클래스형 컴포넌트 라이프 사이클
마운트
constructor
컴포넌트를 새로 만들 때마다 호출되는 생성자 클래스
getDerivedStateFromProps
props에 있는 값을 state 넣을 때 사용
render
컴포넌트를 렌더링하는 메서드
componentDidMount
컴포넌트가 웹 브라우저 상에 나타난 후 호출되는 메서드
업데이트
컴포넌트가 업데이트 되는 경우
- props 가 바뀔때
- state 가 바뀔때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제로 렌더링 트리거 할 때
getDerivedStateFromProps
업데이트시 props의 변화에 따라 state 값에도 변화를 줌
sholdComponentUpdate
컴포넌트 리렌더링 여부 결정하는 메서드
true 혹은 false 값을 반환해야 하며, true를 반환하면 라이프사이클을 계속 실행하고, false를 반환하면 라이프사이클을 중단합니다
render
컴포넌트를 렌더링하는 메서드
getSnapshotBeforeUpdate
컴포넌트 변화를 DOM에 반영하기 적전에 호출되는 메서드
componentDidMount
컴포넌트의 업데이트 작업이 끝난 후 호출되는 메서드
언마운트
componentDidUnMount
컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출되는 메서드
라이프 사이클 메서드
render()
컴포넌트를 할때 사용하며 필수 메서드
아무것도 렌더링하고 싶지 않다면 null 값이나 false 값을 반환
constructor()
초기 state를 설정
getDerivedStateFromProps()
props로 받아온 값을 state에 동기화 시키는 용도
componentDidMount()
DOM정보를 가져오거나 state의 변화를 줄때 사용
비동기 작업,setTimeout, setInterval 등의 이벤트 처리 가능
shouldComponentUpdate(nextProps, nextState)
컴포넌트 리렌더링 여부 결정하는 메서드
nextProps, nextState 에 접근 가능
getSnapshotBeforeUpdate(prevProps, prevState)
render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 실행
여기서 반환한 값은 componentDidupdate snapshot파라미터를 통해 전달
componentDidUpdate(prevProps, prevState, snapshot)
컴포넌트 리렌더링 완료 후 실행
prevState, prevProps 등 이전 데이터에 접근 가능
componentWillUnMount()
컴포넌트를 Dom에서 제거할때 실행
componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 작업 제거 필요
componentDidCatch(error, info)
컴포넌트 렌더링 도중에 에러가 발생했을때 실행
this.props.chlidren으로 전달되는 컴포넌트에서 발생하는 에러
