react - [컴포넌트 생명주기 (component lifecycle)]

 ✅ 컴포넌트 생명주기란?

 1. 마운트(Mount)

  - 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될때 순서대로 호출된다!!!

 

    * 자주 사용되는 메서들은 파란색으로 표시함

 

  1) constructor()

 

  2) static getDerivedStateFromProps()

 

  3) render()

 

  4) componentDidMount()

 

 

2.  업데이트(Update)

- props 또는 stater가 변경되면 갱신(update)이 발생!! 아래 메소드들이 순서대로 호출된다!

 

 1) static getDerivendStateFromProps()

 

 2) shouldComponentUpdate()

 

 3) render()

 

 4) getSnapshotBeforeUpdate()

 

 5) componentDidUpdate()

 

 3. 마운트 해제

 - 컴포넌트가 DOM상에서 제거될 때 호출된다

 

  componentWillUnmount()

  

       * componentWillUnmount() 메서드는 이제 사용하지말라고 react document에서 나타내는데 왜그렇지??

 

            -> componentWillUnmount() 메소드가 아니라 UNSAFE_componentWillMount() 메소드였다.. !

 

 

 4. 오류 처리

 - 아래 메서드들이 실행되는 경우!

 

     1) 자식 컴포넌트를 렌더링 하는 과정에서 오류가 발생했을 경우

 

     2) 자식 컴포넌트가 생명 주기 메서드들을 호출하는 과정에서 오류가 발생했을 경우

 

     3) 자식 컴포넌트가 생성자 메서드를 호출하는 과정에서 오류가 발생했을 경우

 

 (1) static getDerivedStateFromError()

 

 (2) componentDidCatch()

 

 

5. 기타 API

 - 이 외에도 컴포넌트는 몇몇 API를 제공한다!

 

  1) setState()

 

  2) forceUpdate()

 

 

 6. Class 프로퍼티

   1) defaultProps

 

   2) displayName

 

 

 7. 인스턴스 프로퍼티

  1) props

 

  2) state