컴포넌트 생성
constructor (생성, setState 사용X), -> componentWillMount(렌더 되기전) -> render(그리는경우, setState 사용X) -> componentDidMount(렌더가 그려졌을때)
컴포넌트 제거
componentWillUnmount 실행
컴포넌트 props 변경
componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
컴포넌트의 state 변경
shouldComponentUpdate -> componentWillUpdate-> render -> componentDidUpdate
- constructor
props를 사용하거나 state를 정의하기 위해 쓰는 constructor인데요. 초기 state를 설정
2 static getDerivedStateFromProps
props값을 state 안에 넣어주는 경우에 부모로부터 오는 값 props를 현재 상태 state에 바인딩할떄 사용한다
(업데이트마다 props값을 state에 넣는다
- render
props,state를 기반으로 jsx코드를 반환한다. (setState나 dom변화를 render에서 실행하면 안된다)
무조건 필수적으로 실행되야하며 render 후 dom생성후 화면이 그려지기때문에 dom정보등을 얻어올 수 없다
가장 중요한 라이프사이클 메소드로 유일하게 필수인 메소드
-
componentDidMount
dom이 생성되고 렌더링이 끝난후에 실행되는 메소드
이벤트 등록, 비동기 작업(네트워크, setTimeout, setInterval)등을 여기서 실행한다 -
shouldComponentUpdate
true ro false를 반환해야하는 메소드, 리렌더링을 할지 말지 결정하며 최적화에 관련된 메소드이다.
props와 state는 this.props, this.state로 , 매개변수로는 nextProps, nextState를 사용함으로써
새로 설정될 값에 접근가능
- getSnapshotBeforeUpdate
리렌더링 직전에 브라우저에 실제로 반영되기 전에 호출된다. 반환값은 ComponentDidUpdate에서 세번째 매개변수로 사용되며 업데이트 직전값을 참고하고 싶을때 사용
(채팅화면등 스크롤위치를 따로처리하는 작업이 있을때 고려)
- componentDidUpdate
리렌더링이 완료된 후 실행되며 매개변수로는 (prevProps, prevState, snapshot)가 있어서 총 3개를 가집니다.
컴포넌트가 전에 가진 데이터에 접근하는 prevProps와 prevState, snapshot(getSnapshotBeforeUpdate로부터 반환)
-
componentWillUnmount
DOM에서 컴포넌트를 제거할 때 실행된다. componentDidMount에서 등록해둔 비동기 , 이벤트, 새로 생성한 DOM등이 있을 때 여기서 제거한다.(메모리 누수방지) -
componentDidCatch
오류에 대해 보여준다.
