#5 React Component Lifecycle

 

React Component Lifecycle

 

리액트 컴포넌트 라이프사이클

 

• 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 페이지에서 사라질때 까지를 의미
• 라이프 사이클은 크게 3가지 카테고리로 나뉨
  1. 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는것
  2. 업데이트 : 리렌더링
  3. 언마운트 : 컴포넌트를 DOM에서 제거하는 것
• 라이프사이클의 특정 시기에 특정 작업을 처리하기 위해 "라이프사이클메서드" 사용
• 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능

 

마운트

마운트할 때 호출하는 메서드

• 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것
• 호출 메서드
  1. constructor( ) : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
  2. getDerivedStateFromProps( ) : props에 있는 값을 state에 넣을 때 사용하는 메서드
  3. render( ) : 준비한 UI를 렌더링하는 메서드
  4. componentDidMount( ) : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

 

업데이트

업데이트할 때 호출하는 메서드

• 업데이트가 일어나는 4가지 경우
  1. props가 바뀔 때
  2. state가 바뀔 때
  3. 부모 컴포넌트가 리렌더링 될 때
  4. this.forceUpdate로 강제로 렌더링을 트리거할 때
• 호출 메서드
  1. getDerivedStateFromProps( ) : props 변화에 따라 state 값에 변화를 주고 싶을 때 사용
  2. shouldComponentUpdate( ) : 컴포넌트가 리렌더링을 해야 할지 말아야 할지 결정하는 메서드
     • true 반환 : 리렌더링
     • false반환 : 리렌더링 중단
  3. render( ) : 컴포넌트 리렌더링
  4. getSnapshotBeforeUpdate( ) : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
  5. componentDidUpdate( ) : 업데이트 작업 종료 후 호출하는 메서드

 

언마운트

언마운트할 때 호출하는 메서드

• 컴포넌트를 DOM에서 제거하는 것
• 호출메서드
  • componentWillUnmount( ) : 언마운트 직전에 호출하는 메서드

 

컴포넌트 렌더링 도중 에러 잡아내기

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

• componentDidCatch( )
  • 렌더링 도중 에러가 발생했을 때 어플리케이션이 먹통이 되지 않고 오류 UI를 보여줄 수 있게 한다
  • 에러 발생시에 state를 변경하고 render에서 해당 처리를 구현하면 된다.
  • 주의할점은 자식 컴포넌트에서 발생하는 에러만 잡아낼 수 있고, 자신의 에러는 잡아낼수 없다.