Life Cycle

생명은 시간의 흐름에 따라 시시각각 변화(태어남 -> 성장(변화) -> 죽음)한다.
마찬가지로 컴포넌트도 이러한 생명주기에 따라 다양한 라이프사이클 메서드가 제공된다.

Life Cycle Method

컴포넌트의 라이프 사이클을 크게 나누면 다음의 3단계로 진행됨

Mount

컴포넌트 인스턴스를 만들고 DOM에 삽입할 때 다음 순으로 메소드 실행됨

class LifeCycle extends Component {
  // 1. 컴포넌트 생성 시점에 호출
  constructor(props) {
    super(props)
  }
  
  // 2. 전달된 상태 및 속성을 가져와 설정하는 시점에 호출 (잘 사용되지 않음)
  static getDerivedStateFromProps(props, state) {
    // 컴포넌트의 상태에 업데이트 {}
  	return null
  }
  
  // 3. 컴포넌트 렌더링 시점에 호출
  render() {
    return <div />
  }
    
  // 4. DOM에 마운트 된 이후 시점에 호출
    componentDidMount() {}
}

부모 자식 컴포넌트 간의 라이프사이클 순서

1. 부모 컴포넌트 생성
2. 부모 컴포넌트 render()
3. 자식 컴포넌트 생성
4. 자식 컴포넌트 render()
5. 자식 컴포넌트 componentDidMount()
6. 부모 컴포넌트 componentDidMount()

Update

props 또는 state가 변경될 경우 발생 => re-rendering

class LifeCycle extends Component {
  // 1. 전달된 상태 및 속성을 가져와 설정하는 시점에 호출 (업뎃)
  static getDerivedStateFromProps(props, state) {
  	return null
  }
  
  // 2. 컴포넌트 업데이트 예정 시점에 호출 (업뎃하거나, 안하거나) => 성능 최적화 용도
  shouldComponentUpdate(nextProps, nextState) {
    return true // flase를 반환할경우 렌더링 취소
  }
  
  // 3. 컴포넌트 렌더링 (업데이트)
  render() {
    return <div />
  }
    
  // 4. 컴포넌트 업데이트 전 스냅샷 가져오는 시점에 호출 (커밋전)
  getSnapshotBeforeUpdate(nextProps, nextState) {}
    
  // 5. 컴포넌트 업데이트 이후 시점에 호출
  componentDidUpdate(prevProps, prevState, snapshot) {}
}

Unmount

컴포넌트가 DOM에서 제거될 때 실행되는 메서드

class LifeCycle extends Component {
  // 1. DOM에서 unmount 되어 제거되기 직전에 실행
  componentWillUnmount(){}
}

Side Effect (부작용)

일반적으로 React 컴포넌트는 선언형이다.
컴포넌트의 state, props에 의존해 실시간으로 화면을 업데이트하는 것이 리액트에서 컴포넌트를 사용하는 이유!!
예를들어 componentDidMount를 사용해 실제 DOM 객체를 조작하는 것은 React에서 관리해주지 않는다.
이러한 부작용이 sideEffect

오류 처리

컴포넌트 렌더링, 라이프사이클 메서드가 실행될 때 오류가 발생한 경우 호출됨

static getDerivedStateFromError()

자식 컴포넌트에서 오류가 발생되면 이를 감지하여 컴포넌트의 state.hasError를 업데이트 한다.
render()메서드는 업데이트 된 hasError 값을 조건 처리하여 오류를 렌더링 한다.

class LifeCycle extends Component {
  state = { hasError: false }  
  // 자식 컴포넌트의 오류를 throw한 후 실행
  static getDerivedStateFromError(error) {
    // throw된 오류가 감지되면, hasError 상태 값을 true 처리
    return { hasError: true }
  }
  render() {
    // 오류 발생 시, 렌더링 과정에서 오류 메시지 반환
    if (this.state.hasError) {
      return <h1>오류발생</h1>
    }
    return <div />
  }
}

componentDidCatch()

자식 컴포넌트가 오류가 발생된 이후 실행됨
error,info 2개의 매개변수가 전달되며 info는 어떤 컴포넌트가 오류를 발생시켰는지에 대한 정보를 가진 componentStack 속성을 가진 객체이다.

class LifeCycle extends Component {
  state = { hasError: false }  
  // 자식 컴포넌트의 오류를 throw한 후 실행
  static getDerivedStateFromError(error) {
    // throw된 오류가 감지되면, hasError 상태 값을 true 처리
    return { hasError: true }
  }
  componentDidCatch(error, info) {
    /*
      info arg: 어떤 컴포넌트가 오류를 발생시켯는지에 대한 정보를 가진 
      componentStack 속성을 가진 객체
    */
    logComponentStackToService(info.componentStack)
  }

  render() {
    // 오류 발생 시, 렌더링 과정에서 오류 메시지 반환
    if (this.state.hasError) {
      return <h1>오류발생</h1>
    }
    return <div />
  }
}