[리액트] 라이프 사이클

컴포넌트는  다음과 같이 생명주기를 가지고 있다.

 

 

1. componentDidMount: 컴포넌트가 최초로 렌더링 된 후 호출되는 함수(생성)

 

componentDidMount는 render가 되고 나서 실행된다.

componentDidMount는 주로 비동기 요청을 할 때 사용한다.

 

컴포넌트가 생성되면 아래와 같이 차례로 실행된다.

1) constructor: 클래스가 생성될 때 호출되는 생성자 함수
2) render: 화면에 컴포넌트를 표시하는 함수
3) componentDidMount: render가 되고 나서 실행되는 함수

 

 

 

2. shouldComponentUpdate: 조건에 따라 렌더링을 막을 수 있는 함수, 성능 최적화에 유용

true이면 렌더링 되고 false이면 렌더링이 되지 않는다.

 

 

 

3. componentDidUpdate : 컴포넌트가 업데이트 되고나서 호출되는 함수

setState > component 업데이트 > 리렌더링 > componentDidUpdate 

 

 

 

4. componentWillUnmount: 컴포넌트가 제거될 때 호출되는 함수(소멸)

-componentDidMount에서 했던 동작을 제거하기 직전에 일어나는 동작이다. 
-여기서는 비동기 요청 정리를 많이 한다.
-예를 들어 비동기 요청(ex.setInterval)을 했을 때,
이 요청을 제거해주지 않으면 계속 돌아간다.(메모리 누수 발생)
이 문제를 해결하기 위해 componentWillUnmount에서 이를 정리해 주어야한다.
 
-componentDidMount와 componentWillUnmount는 항상 짝이다.