React Life Cycle

리액트 컴포넌트의 라이프 사이클은 크게 3가지로 나눌 수 있습니다.

1. 마운팅

2. 업데이트

3. 언마운팅

 

마운팅 - 한 번 실행

constructor - 컴포넌트의 속성과 상태를 설정하는 단계입니다.

componentWillMount -  컴포넌트가 DOM에 삽입되기 전에 실행됩니다.

여기서 상태를 바꾸더라도 재랜더 되지 않습니다.

componentDidMount - 컴포넌트가 DOM에 삽입되고 난 후 실행됩니다.

DOM 반영 완료. 모든 엘리먼트에 접근 가능합니다.

서버 랜더링에서는 실행 안됩니다. Ajax 요청에 적당합니다.

 

업데이트 - 여러 번 실행

componentWillReceiveProps - 컴포넌트가 새로운 속성을 받을때 실행됩니다.

처음에는 실행되지 않습니다.

상위 속성이 바뀌었건 안바뀌었건 재랜더 되면 일단 실행됩니다. 리액트 입장에서는 속성이 변화되었는지 알수 없기 때문입니다.

새로운 속성을 파라미터로 받습니다.

shouldComponentUpdate - 컴포넌트가 갱신되는 조건을 정의해서 재랜더링을 최적화할 수 있습니다.

false 를 리턴하면 랜더 함수 호출을 하지 않게 됩니다.

componentWillUpdate -  컴포넌트가 랜더링되기 바로 직전에 실행됩니다.

해당 사이클에서 상태를 바꾸면 무한루프에 걸릴 수 있습니다. 

개인적으로 componentDidUpdate 사이클을 사용하길 권합니다.

componentDidUpdate - 컴포넌트가 갱신된 후 실행됩니다.

 

언마운팅 - 한번 실행

componentWillUnmount - 컴포넌트가 갱신된 후에 실행됩니다.

컴포넌트에서 글로벌 이벤트를 걸었다면 이때 해제 해주면 됩니다.

 

마운팅	Props 갱신	State 갱신	forceUpdate	언마운팅
constructor
componentWillMount
	componentWillReceiveProps
	shouldComponentUpdate	shouldComponentUpdate
	componentWillUpdate	componentWillUpdate	componentWillUpdate
render	render	render	render
	componentDidUpdate	componentDidUpdate	componentDidUpdate
componentDidMount
				componentWillUnmount

+ componentDidCatch - 하위 컴포넌트에서 발생한 에러를 처리합니다.

리액트 공식문서에 설명이 잘 되어 있습니다.

참조 - 리액트 교과서 / 길벗