클래스형 컴포넌트 생명주기

• componentDidMount이 실행되는 시점
• componentDidUpdate이 실행되는 시점
• componentWillUnMount이 실행되는 시점

 

 

 

클래스형 컴포넌트란?

• 모든 클래스형 컴포넌트는 React.Component로 상속을 받아야 한다.

       React.Component or Component 둘 다 가능

 

• Class 키워드가 들어가야 한다.
• render() 메서드는 클래스 컴포넌트에서 반드시 구현돼야 하는 유일한 메서드이다.
• state, lifeCycle 관련 기능 사용이 가능하다.
• 함수형보다 메모리 자원을 더 많이 사용한다.
• 임의 메소드를 정의할 수 있다.

 

 

Life Cycle

 

모든 리액트 컴포넌트는 LifeCycle을 갖고 있습니다.

LifeCycle은 Mount (생성) → Update (업데이트) → UnMount (제거) 세 가지 생명주기로 나뉩니다.

출처: 오즈코딩스쿨 리액트 강의

componentDidMount()

컴포넌트가 마운트 된 직후 실행이 되는 메소드로,

실행 시점은 컴포넌트가 화면에 나타나 있는 상태이다.

 

componentDidUpdate()

컴포넌트가 업데이트되고 나서,

화면에 변경사항이 반영되고 나면 실행이 되는 메소드이다.

 

componentWillUnmount()

모든 정리 작업을 수행하는 메소드로,

컴포넌트가 마운트 해제되어 화면에 제거되기 직전 실행이 된다.

 

 

++ Mount란?

컴포넌트가 DOM에 추가되는 동작

 

++ Unmount란?

컴포넌트가 DOM에서 제거되는 동작