라이프 사이클은 총 10가지이다. Will 접두사는 어떤 작업을 작동하기전에 싱핼 하는 메소드가, did는 어떤 작업을 한후에 실행하는 메서드이다.
라이프 시이클은 총 3가지 카테고리로 나눌수 있는데, mount, unmount, update 다.
DOM이 생성되고, 웹 브라우저 상에 나타나는 것을 mount라고 한다. 이 때 호출되는 메서드는 다음과 같다.
컴포넌트를 업데이트 하는 경우는 아래 4가지다.
호출되는 메서드들은 아래와 같다.
컴포넌트를 DOM에서 제거하는 것을 말한다.
컴포넌트의 모양새를 정의한다. 라이프사이클 메서드중 유일하게 필수 메서드이기도 하다. 여기에서 this.props this.state에 접근할 수 있으며, 리액트 요소를 반환한다. 다만 이 안에서는 절대 state를 변경해서는 안되며, 웹브라우저에 접근해서도 안된다.
컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 최초로 실행된다. 여기에서 초기 state를 정할 수 있다.
v16.3 이후에 등장한 메서드로, props로 받아온 값을 state에 동기화 시키는 용도로 사용되며, 컴포넌트를 마운트하거나 props를 변경할 때 호출된다.
컴포넌트를 만들고, 첫 렌더링을 마친 후 실행된다. 이 안에서 다른 자바스크립트 라이브러리나 프레임워크 함수를 호출하거나, 이벤트 등록, setTimeOut, setInterval 네트워크요청과 같은 비동기 요청을 실행하면 된다.
props나 state를 변경했을 때, 리렌더링을 시작할지 여부를 결정하는 메서드다. 여기에서는 반드시 true, false를 반환해야 한다. false를 반환하면 이 후의 과정이 모두 멈춘다.
이 안에서 this.props this.states로 접근할 수 있고, 다음 값을 this.nextProps this.nextState로 다음 값을 접근할 수 있다. 성능을 최적화 하거나, 알고리즘을 작성하여 리렌더링을 방지하기 위해서 사용하기도 한다.
v16.3 이후에 등장한 메서드로, render를 호출한 후 DOM에 변화를 반영하기 바로 직전에 호출하는 메서드다. 여기에서 반환하는 값을 componentDidUpdate에서 세번째 파라미터인 snapshot으로 값을 전달 받을 수 있다. 주로 스크롤바의 위치와 같이 업데이트하기 직전에 값을 참고할 일이 있을 때 활용한다.
리렌더링을 완료한 후에 실행한다. 업데이트가 끝난 이후이므로, DOM관련 처리를 해도된다. 여기에서 prevProps prevState를 활용하여 이전의 값에 접근할 수 도 있다. getSnapshotBerforeUpdate에서 반환한 값이 있다면 여기서 snapshot값을 전달 받을 수 있다.
컴포넌트를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트, 타이머, DOM이 있다면 어기에서 제거해야 한다.