TIL_49_Component Life cycle

poohv7·2021년 3월 14일
0
post-thumbnail

render, componentDidMount, componentDidUpdate, componentWillUnmount 등의 함수는 React.Component class에서 제공하는 메서드이다. 컴포넌트를 만들 때 class로 생성하면 위의 메서드를 사용할 수 있다. 컴포넌트가 생활주기에 따라 각자의 메서드가 호출되는 것이다.

마운트
아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출된다.

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

render() 메서드는 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드이다.

componentDidMount() 메서드는 구성 요소가 렌더링 된 후 호출된다.
여기서 컴포넌트가 이미 DOM에 배치되어 있어야하는 명령문을 실행한다.

constructor()메서드는 구성 요소가 시작될 때 다른 것보다 먼저 호출되며 초기 state및 기타 초기 값 을 설정하는 자연스러운 장소이다.
constructor() 메서드는 props, 를 인수로 사용하여 호출되며 항상 먼저를 호출하여 시작해야한다. super(props) 그러면 부모의 생성자 메서드가 시작되고 구성 요소가 부모 ( React.Component) 에서 메서드를 상속 할 수 있다.

업데이트
props 또는 state가 변경되면 갱신이 발생한다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출되는 것이다.

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

마운트 해제
아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출된다.

  • componentWillUnmount()

오류 처리
아래 메서드들은 자식 컴포넌트를 렌더링하거나, 자식 컴포넌트가 생명주기 메서드를 호출하거나, 또는 자식 컴포넌트가 생성자 메서드를 호출하는 과정에서 오류가 발생했을 때에 호출된다.

  • static getDerivedStateFromError()
  • componentDidCatch()

기타 API
이 외에도 컴포넌트는 몇몇 API를 제공한다.

  • setState()
  • forceUpdate()

class 프로퍼티

  • defaultProps
  • displayName

인스턴스 프로퍼티

  • props
  • state

0개의 댓글