✏️ 생명주기(LifeCycle)소개 (class형 컴포넌트)

리액트 생명주기란?

나타났다가(mount), 업데이트 되었다가(update), 죽는(unmount) 생명주기의 과정을 거친다.

 

리액트 생명주기(라이프사이클)이란 , 컴포넌트 중심 라이브러리의 집합체라고 보면 됨.

모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드 들이 있음.

 

거의 대부분 생명주기는 클래스형 컴포넌트를 포함하는거라 요새는 함수형 컴포넌트를 사용하기 때문에 그날그날 개념을 찾아보도록 하자.

 

 

mount될때

각 메서드 소개

1. constructor -> 생성자, 컴포넌트가 맨 처음 만들어질때 호출

 

2. getDerivedStateFromProps -> 부모 컴포넌트로부터 prop를 전달받을때, state에 값을 일치시키는 역할을 하는 메서드 , 마운트 될때 업데이트(리렌더링) 될때도 호출함.

 

3. render -> 최초 mount가 준비완료되면 호출되는, 즉 렌더링 하는 메서드임, 컴포넌트를 DOM에 마운트 하기 위해 사용됨.

 

4. componentDidMount -> 컴포넌트가 브라우저에 표시가 된 후 호출되는 메서드임.

 

update

컴포넌트가 갱신될때를 말함. (리렌더링)

메서드 소개

1. getDerivedStateFromProps -> 마운트 과정에서도 동일하게 호출되었던 메서드, 부모 컴포넌트로부터 prop를 전달받을때 state에 값을 일치시키는 역할을 하는 메서드임.

 

2. shouldComponentUpdate -> 리렌더링 여부 판단(함수 호출 결과 : true/false) 

true인 경우 : 리렌더링 진행

false인 경우 : 리렌더링 하지 않음

함수형 컴포넌트에서 memo, useMemo, useCallback이 이런 역할을 대신함.

 

3. render -> 변경사항 반영이 다 되어 준비완료되면 호출되눈, 즉 렌더링 하는 메서드임. 컴포넌트를 DOM에 마운트하기위해 사용됨.

 

4. getSnapshotBeforeUpdate -> 컴포넌트에 변화가 일어나기 직전 DOM의 상태를 저장한다, componentDidUpdate함수에서 사용하기 위한 스냅샷 형태의 데이터임

 

5. componentDidUpdate -> 컴포넌트 업데이트 작업 완료 후 호출

 

 

Unmount 

컴포넌트가 DOM에서 제거되는 시점을 말함.

메서드 소개

componentWillUnmount -> 컴포넌트가 사라지기 전 호출되는 메서드, useEffect의 return과 동일함.