생명주기

생명주기는 컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트 생명주기라고 합니다.

 

아래에서 해당하는 특정 시점에서 불리는 함수를 작성하도록 하겠습니다.

 

constructor()

constructor() 함수는 생성이 될때 한번만 호출이 됩니다.

따라서 상태를 선언하거나 초기화 할때 사용을 합니다.

정의를 할때는 super() 함수를 작성을 가장 먼저 진행을 해야합니다.

 

render()

render 함수 같은 경우에는 state가 변경이 되어 UI를 다시 그려야 할때 호출되는 함수입니다.

 

getDerivedStateFromProps(props , state) 

이 함수 같은 경우에는 정적 함수입니다. 그래서 static으로 선언을 해야합니다.

당연히 정적함수이기 때문에 this.state을 통해서 접근을 하실수가 없고 매개변수 props, state을 통해서 접근 해야합니다.

 

props 같은 경우에는 상위 컴포넌트에서 제공받은 props 이며 state같은 경우에는 현재 컴포넌트에 state값 입니다.

반환값으로는 state를 변경합니다.

 

componentDidMount()

componentDidMount() 함수는 render() 함수가 JSX를 화면에 그린 뒤에 호출되는 함수입니다. 

 

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate 함수는 프로퍼티를 변경하거나 setState() 함수를 호출해서 state값을 변경하면 변화를 비교하는 작업을 통해서 화면을 업데이트할지 말지 판단을 진행합니다.

 

전에 살펴보았던 forceUpdate() 같은 경우에는 이 함수를 호출하지 않습니다.

 

true일 경우에는 진행 false일 경우에는 변경사항이 없다라고 판단을 합니다.

 

getSnapshotBeforeUpdate(prevProps , prevState)

컴포넌트에 변경된 내용이 가상 화면에 완성된 이후에 호출됩니다. 따라서 실제로 출력되기 전에 호출되므로 요소의 크기 스크롤 위치등 DOM 정보에 접근할 때 사용이됩니다.

 

componentDidUpdate(prevProps , prevState , snapshot)

컴포넌트가 실제 화면에 출력된 이후 호출되는 함수입니다.

부모 컴포넌트로 부터 이전 프로퍼티와 이전 state값과 함께 getSnapshotBeforeUpdate 함수에서 반환된 값을 인자로 받습니다.

 

따라서 실제로 스크롤 위치 변경등을 작업등을 위해서 DOM 정보를 변경을 할때 사용이 됩니다.

 

componentWillUnmount()

컴포넌트가 소멸되기 직전에 호출되는 함수입니다. 따라서 컴포넌트에 대한 작업을 해제할때 필요한 함수입니다.

 

componentDidCatch(error , errorInfo) , getDerivedStateFromError()

하위 컴포넌트 트리의 어디에서 자바스크립트의 에러를 기록하고 깨진 컴포넌트 대신 폴백 UI를 보여주는 작업을 진행합니다.

 

다만 다음과 같은 에러는 감지하지 않습니다.

1. 이벤트 핸들러 ex) onClick

2. 비동기적 클릭

3. 서버 사이드 렌더링

4. 자식에서가 아닌 경계 자체에서 발생하는 에러

 

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

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트 합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 리포팅 서비스에 에러를 기록할 수도 있습니다.
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI를 커스텀하여 렌더링할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}