라이프사이클 메서드 (Lifecycle Method)


컴포넌트 생명 주기



render

  • 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드

  • 메서드가 호출되면 this.props와 this.state의 값을 활용하여 아래의 것 중 하나를 반환

    • React 엘리먼트
    • 배열과 Fragment
    • Portal
    • 문자열과 숫자
    • Booleans / null / undefined
  • 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과 반환

mount

constructor

  • 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 됨
  • this.state에 객체를 할당하여 지역 state를 초기화
  • 인스턴트에 이벤트 처리 메서드를 바인딩

componentDidMount

  • 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출
  • 초기화 작업, 네트워크 요청하기 적절



update

componentDidUpdate

  • 갱신이 일어난 직후에 호출
  • 이전과 현재의 props를 비교하여 네트워크 요청할 때



unmount

componentWillUnmount

  • 컴포넌트가 마운트 해제되어 제거되기 직전에 호출
  • 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제
  • 다시 렌더링되지 않으므로, componentWillUnmount() 내에서 setState()를 호출 불가능
  • 컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않음




references
👉 https://ko.legacy.reactjs.org/docs/react-component.html