[React] 클래스형 컴포넌트의 생명주기(LifeCycle)

리액트 라이프사이클이란

리액트 앱이 실행되고 종료되는 과정을 마운트, 업데이트, 언마운트로 나눈 것

Q. 마운트, 업데이트, 언마운트란?

• 마운트 : 컴포넌트가 실제 DOM에 삽입되는 것
• 업데이트 : 컴포넌트가 변하는 것
• 언마운트 : 컴포넌트가 DOM 상에서 제거되는 것

Q. 렌더링이란?

• 컴포넌트 내에 Element 요소들(HTML, React 사용자 정의 태그)을 화면에 그리는 동작

 

React의 라이프사이클 (16.3 >= )

 

[1] 컴포넌트 생성

constructor → render → componentDidMount

 

1. constructor

• 컴포넌트가 만들어지면 가장 먼저 실행되는 생성자 메서드
• 초기값을 설정할때 주로 사용

 

2. render

• constructor()에서 정의한 state 값의 접근
• 클래스 컴포넌트에서 반드시 구현되어야 하는 메소드

3. componentDidMount

• 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드
• 외부 라이브러리 연동, 화면의 렌더가 이루어질때 백엔드로부터 axios나 fetch 등으로 데이터를 주고받을때 사용
  
  

 

[2] 업데이트 (데이터 변화감지)

render → componentDidUpdate

Virtual DOM에서 변경된 혹은 업데이트된 내용을 이전 값과 비교해서 변경된 값을 다시 렌더링 해주는 (DOM 트리를 업데이트 해주는) 것

 

4. render (= Re-render)

• 사용자가 화면에 다시 새롭게 보여주는 것

 

5. componentDidUpdate

• 전달받은 props 값의 변화가 발생하거나 리 렌더링이 발생을 하는 경우 수행
• 컴포넌트 내에서 state의 값이 변하는 경우 수행

 

 

[3] 언마운트

componentWillUnmount

6. componentWillUnmount

• 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
• ex. 로그아웃, 브라우저 닫기 전 캐시 삭제 등

 

 

 

참고

[React] 클래스 컴포넌트 생명주기(lifecycle) 이해하기

[React] 리액트 생명주기란?

 

[React] 라이프사이클(Life Cycle) 이해