[React.js] LifeCycle

페이지에 들어가고, 업데이트하고, 페이지에서 나가는 각각의 과정에서 실행되는 react의 LifeCycle 함수들이 있다.

잘 사용되지 않는 getDerivedStateFromProps, 등을 제외하고 핵심적인 함수들만을 적어 보자면 아래와 같다.

 

 

1. Mounting

페이지에 들어갈 때 실행되는 함수들이다.

 - constructor(): 마운팅 단계에서 가장 먼저 호출되는 생성자 함수이다.

 - render(): 컴포넌트를 반환한다.

 - componentDidMount(): 컴포넌트가 render되면 호출되는 함수로, 컴포넌트가 마운트되었음을 알려준다.

 

 

2. Updating

동적으로 state의 값을 바꿀 때, 즉 setState가 호출되어 값이 변할 때 실행되는 함수들이다. 

 - shouldComponentUpdate(): 컴포넌트의 성능을 최적화하기 위해 사용하는 함수로, 기본적으로는 true 상태로, 업데이트시 모든 컴포넌트를 리렌더링하지만, 변하지 않는 요소를 false로 설정하면 해당 요소를 렌더링하지 않고 true 상태인 컴포넌트만을 리렌더링한다.

 - render(): shouldComponentUpdate로 업데이트할 컴포넌트가 결정되면 해당 컴포넌트를 렌더링한다.

 - componentDidUpdate(): 업데이트가 완료되면, 즉 렌더의 실행이 끝나면 실행되는 함수이다.

 

 

3. Unmounting

페이지를 떠날 때 실행되는 함수이다.

 - componentWillUnmount(): 페이지를 떠날 때 실행될 함수이다.