Component의 라이프 사이클 메서드

개요

클래스형 컴포넌트에서만 사용가능 했으나 리액트의 발전으로 함수형 컴포넌트에서도 사용 가능

(함수형 컴포넌트에서 Hooks를 통해 라이프 사이클 제어 가능)

 

 

라이프 사이클 메서드

• 마운트
  • 정의 
    • 페이지에 컴포넌트가 나타남
    • DOM 생성되고, 웹 브라우저상에 나타나는 것
  • 종류
    • constructor( )
      • 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
    • getDerivedStateFromProps( )
      
      • props에 있는 값을 state에 넣을 떄 사용하는 메서드
    • render( )
      • 준비한 UI를 렌더링하는 메서드
    • componentDidMount( )
      • 컴포넌트가 웹 브라우저 상에 나타난 후, 호출하는 메서드
• 업데이트
  • 정의 
    • 컴포넌트 정보를 업데이트
  • 업데이트 시기
    • props, state가 변경될 때
    • 부모 컴포넌트가 리렌더링 될 때
    • this.forceUpdate로 강제로 렌더링을 트리거할 때
  • 종류
    • getDerivedStateFromProps( )
      • 마운트 과정 or 업데이트 시작 전에 호출
      • props변화에 따라 state 값에도 변화를 주고 싶을 때 사용
    • shoulComponentUpdate( )
      • 컴포넌트의 리렌더링 여부 결정하는 메소드
        • true or false 반환
          • true 반환 => 다음 라이프사이클 메서드 계속 실행
          • false 반환 => 작업 중지 (컴포넌트 리렌더링 X)
    • render( )
      • 컴포넌트를 리렌더링
      • 컴포넌트 모양새를 정의
        • 라이프사이클 메서드 중 유일하게 필수 메소드
    • getSnapshotBeforeUpdate( )
      • 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메소드
    • componentDidUpdate( )
      • 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메소드
• 언마운트
  • 정의
    • 페이지에서 컴포넌트가 사라짐
    • 컴포넌트를 DOM에서 제거
  • 종류
    • componentWillUnmount( )
      • 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출하는 메소드

 

---