[React] 클래스형 컴포넌트와 함수형 컴포넌트의 생명주기(feat. react hooks)

💡 함수형 컴포넌트가 도입된 지 시간이 꽤 흘러서 실무에서도 클래스형보다 함수형을 더 많이 쓰고 있다고 합니다.

React 공식문서에도 함수형을 쓸 것을 권고하고 있습니다. 하지만 회사의 오래된 heritage로 클래스형 컴포넌트를 마주칠 수 있는 상황도 있을 수 있으니 이를 대비하여 사전(?) 지식으로서 짧게 알아보는 시간을 가졌습니다.

 

 

 

1. LifeCycle

  리액트의 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터 사라질 때까지의 생명주기를 뜻합니다.

리액트 컴포넌트는 [Mount] -> [Update] -> [Unmount] 의 과정을 거칩니다. mount는 생성될 때, update는 업데이트될 때, unmount는 제거될 때를 뜻합니다.

 

라이프 사이클 메서드의 종류는 총 10가지 입니다.

will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행됩니다.

Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행됩니다.

 

마운트(Mount)

DOM 이 생성되고 웹 브라우저상에 나타나는 것을 Mount 라고 합니다.

마운트 시 호출되는 메서드

• constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
• getDerivedStateFromProps: props에 있는 값을 state 에 넣을 때 사용하는 메서드
• render : 준비한 UI를 렌더링하는 메서드
• componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
• componentWillMount (deprecated): 더 이상 사용되지 않는 메서드입니다. 원래 컴포넌트가 마운트되기 직전에 호출되었습니다. 메서드의 개수에서 제외하였습니다.

 

업데이트(Update)

 컴포넌트는 다음 4가지 경우에 업데이트합니다.

• props가 바뀔 때(새로운 props가 들어왔을 때, 기존 props가 바뀔 때)
• state가 바뀔 때
• 부모 컴포넌트가 리렌더링될 때
• (클래스 컴포넌트) this.forceUpdate로 강제로 렌더링 트리거 할 때

업데이트에 호출되는 메서드

• getDerivedStateFromProps : 앞서 Mount에서도 호출되고, props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용
• shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할 지 말아야 할 지를 결정, true를 반환하면 다음 라이프 사이클 메서드를 계속 실행. false를 반환하면 작업을 중지(리렌더링X) 합니다.
• render : 컴포넌트를 리렌더링 합니다.
• getSnapShotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출
• componentDidUpdate : 컴포넌트의 업데이트 작업이 다 끝난 후에 호출

 

언마운트(Unmount)

Mount의 반대 과정입니다. 컴포넌트를 DOM에서 제거하는 것을 Unmount 라고 합니다.

언마운트 시 호출되는 메서드

• componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출

 

 

---

 

  위 라이프 사이클과 관련해서 클래스형 컴포넌트에서 사용할 수 있는 라이프사이클 메서드 몇 가지를 함수형 컴포넌트와 비교하며 정리해보았습니다.

1. constructor(props) - Mount 

[클래스형 컴포넌트]

 component 생성자 메소드입니다. 컴포넌트를 만들 때 제일 먼저 실행됩니다. 함수형 컴포넌트의 useState 훅처럼 초기 state를 정할 수 있습니다.

그러나 꼭 State를 constructor 함수 안에서 초기화할 필요는 없습니다.

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { number: 0 };
}

[함수형 컴포넌트]

const Example = () => {
    const [count,setCount] = useState(0);
}

 

2. render() - Mount

[클래스형 컴포넌트]

컴포넌트를 렌더링하는 메서드입니다.

// Class
class Example extends React.Component {
  render() {
    return <div>Component</div>
  }
}

• this.props와 this.state 에 접근할 수 있습니다.
• 리액트 요소를 반환합니다.
• render 함수 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하지 않고, 브라우저의 DOM 에 접근해서도 안 됩니다.
• DOM 정보를 가져오거나 State 변화를 줄 때는 이후에 실행되는 componentDidMount 에서 처리해야 합니다.

 

[함수형 컴포넌트]

함수형 컴포넌트에서는 render를 쓰지 않고 컴포넌트를 렌더링 할 수 있습니다.

const example = () => {
  return <div>Component</div>
}

 

 

3. shouldComponentUpdate(nextProps, nextState)  - - - 렌더링 여부를 결정!

props 또는 state를 변경했을 때 리렌더링을 시작할 지 여부를 지정합니다. true 또는 false를 반환해야 합니다.

• 컴포넌트를 만들 때, 따로 만들지 않을 경우 default 로 true 를 반환(true 반환돼서 계속 렌더링 하게 됨)합니다.
• false를 반환하면, 업데이트 과정[렌더링]을 중지합니다.
• 이 메서드 안에서 props와 state는 this.props, this.state로 접근하고, 새로 설정된 props, state는 nextProps, nextState로 접근합니다.
• 프로젝트 성능을 최적화할 때, 리렌더링을 방지할 때는 false를 반환하는데, 이는 컴포넌트 렌더링을 최적화 할 때 중요합니다.

 

4. getSnapshotBeforeUpdate(prevProps, prevState)

  render 에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출됩니다.

• getSnapshotBeforeUpdate의 반환 값은 componentDidUpdate 에서 세 번째 파라미터인 snapshot 값으로 전달받습니다.
• 주로 업데이트 하기 직전의 값을 참고할 일이 있을 때 활용합니다. (ex: 스크롤바 위치 유지)

 

5. componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps

[클래스형 컴포넌트]

 5-1 componentDidMount()     -- (mount)

컴포넌트의 첫 렌더링을 마치고 나면 호출되는 메서드입니다. 이 메서드가 호출될 때는 컴포넌트가 화면에 나타나 있는 상태입니다. 

• 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하게 됩니다.
• 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리합니다.

// Class
class Example extends React.Component {
    componentDidMount() {
        ...
    }
}

[함수형 컴포넌트]

  함수형 컴포넌트에서는 useEffect 훅이 의존성 배열값으로 빈 배열을 가지면 useEffect 내부의 콜백함수가 componentDidMount 했을 때만 실행하도록 역할을 해줍니다.

// Function
function Example(){
    useEffect(() => {
    	...
    }, [])
}

 

 

5-2. getDerivedStateFromProps(nextProps, preState)

• 리액트 v 16.3 이후에 새로 추가되었습니다.
• props로 받아온 값을 state에 동기화시키는 용도로 사용합니다. 컴포넌트가 Mount, Update될 때 호출됩니다.

[클래스형]

static getDerivedStateFromProps(nextProps, prevState) {
  // 조건에 따라 특정 값 동기화
    if(nextProps.value !== prevState.value) {
     return { value: nextProps.value };
    }
    return null;  // state 변경할 필요 없을 경우 null 반환
}

 

[함수형]

함수형은 바로 밑에서 componentDidUpdate의 함수형과 함께 다룹니다.

 

5-2 componentDidUpdate(prevProps, prevState, snapshot)    -- (update)

리렌더링을 완료한 후 변화가 모두 반영된 뒤에 실행됩니다. 업데이트가 끝난 직후이므로 DOM 관련 처리를 할 수 있습니다. 매개변수로 prevProps와 prevState가 있습니다. 

• prevprops 또는 prevState를 통해 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있습니다.
• getSnapshotBeforeUpdate 에서 반환한 값이 있으면 여기서 snapshot 값을 전달받을 수 있습니다.

// Class
class Example extends React.Component {
    componentDidUpdate(prevProps, prevState, snapshot) {
        ...
    }
}

 

[함수형]

• 의존성 배열값에 의존할 값들을 넣어주면 마운트(최초 렌더링) 직후에 콜백함수(effect 함수) 실행 및 해당 의존성 배열값의 변화를 감지하여 effect 함수를 실행합니다.
• 이전에 반환된 clean-up 함수가 있다면, 이 clean-up을 먼저 호출한 후 effect 함수를 실행합니다.(이는 결국 다시 clean-up 함수를 반환하여 다시 clean-up 함수가 남게 됨.)

/* Function */

function Component () {
	useEffect(() => {
    	...
    }, [state1, state2])
}


function Component2 () {
	useEffect(() => {
    	...
       return () => {...}
    }, [state1, state2])
}

 

 

5-3 componentWillUnmount()   -- (unmount)  (  주의! componentDidUnmount() 라는 것은 없습니다. )

컴포넌트를 DOM에서 제거할 때 실행됩니다. componentDidMount 에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거 작업을 해야 합니다. 함수형 컴포넌트 useEffect 훅의 cleanup 함수와 같은 역할을 수행할 수 있습니다.

[클래스형]

// Class
class Example extends React.Component {
    componentWillUnmount() {
        ...
    }
}

[함수형]

  componentWillUnmount의 역할을 clean-up 함수가 실행하게 됩니다. clean-up 함수는 effect(콜백 함수)의 반환되는 함수를 뜻합니다. unmount 직전에 호출됩니다.

/* Function */

function Component () {
	useEffect(() => {
    	...
        return () => { ... }
    }, [])
}

 

---

2. 예외처리 생명주기

   생명주기 메서드에서 예외가 발생하면 getDerivedStateFromError 또는 componentDidCatch 메서드를 구현한 가장 가까운 부모 컴포넌트를 찾게 됩니다. 리액트의 훅은 컴포넌트의 생명주기 중 getDerivedStateFromError와 componentDidCatch 메서드를 지원하지 않기 때문에 함수형 컴포넌트로는 에러 경계를 생성할 수 없습니다.

• getDerivedStateFromError(error)
• componentDidCatch(error, info)

6. getDerivedStateFromError(error)

•  하위의 컴포넌트에서 전달받은 오류를 클래스 컴포넌트 내부의 오류 state에 저장하여 최신화하고, 업데이트된 에러 상태를 화면에 나타내는 용도로 쓰입니다.
• 반드시 갱신된 state를 반환하여 fallback UI를 표시할 수 있도록 해야 합니다.

  static getDerivedStateFromError(error: Error): TerrorBoundaryState {
    // 오류 상태 업데이트
    return {
      hasError: true,
      error,
    };
  }

이 때 주의할 점이 있습니다.

🚨사이드 이펙트가 발생하는 작업을 해서는 안 된다.

getDerivedStateFromError 메서드는 컴포넌트의 render 단계에서 호출됩니다. 즉, render() 메소드가 실행되기 전에 호출되기 때문에 Virtual DOM(VDOM)에 영향을 끼칠 수 있는 사이드 이펙트가 발생하는 작업을 해서는 안 됩니다. 이 때는 대신 componentDidCatch 메서드를 이용해야 합니다.

이와 같은 코드를 짜서는 안 됩니다.

❓getDerivedStateFromError에서 에러정보를 서버로 전송하지 않는이유(참고 링크)

  리액트에서 데이터변경에 의한 화면업데이트는 렌더단계와 커밋단게를 거칩니다. 비동기 렌더링(나중에 react에 추가될수 있는? 혹은 추가된)에서는 렌더단계에서 실행을 멈췄다가 다시 실행하는 과정에서 같은 생명주기 메서드를 여러번 호출할 수도 있습니다..다시 말해 getSnapshotBeforeUpdate, componentDidMount, componentDidUpdate, componentDidCatch를 제외하고는 여러번 호출 될 수도 있다는 것인데, 따라서 getDerivedStateFromError에서 서버로 에러 전송을 여러 번 하지 않도록 componentDidCatch에서 에러전송을 하는 것이 좋습니다.

 

7. componentDidCatch(error, info)

  에러 정보를 서버로 전송하는 용도로 사용됩니다.

• 하위의 컴포넌트에서 오류가 발생하면 호출되고, 해당 오류와 어떤 컴포넌트가 오류를 발생시켰는지에 대한 정보를 가진 componentStack 키를 포함한 객체를 인자로 받습니다.
• 다만, 한계점이 있는데, 이 메서드는 컴포넌트 자신에게 발생하는 에러는 잡아낼 수 없고, 자신의 this.props.children 으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있습니다.
• getDerivedStateFromError 메서드와 달리 render 단계 이후의 commit 단계에서 호출되기 때문에 사이드 이펙트가 발생하는 작업을 수행할 수 있습니다.

componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.log({ error, errorInfo });
  }

 

8. custom error boundary 만들기

 위에서 얘기했듯이 리액트에서는 errorboundary를 함수형 컴포넌트로는 만들 수 없어서 직접 클래스 컴포넌트로 만들어서 사용해야 하는데 아래와 같은 코드를 작성할 수 있었습니다. 해당 error boundary는 후에 `suspense`와 함께 사용하게 됩니다.

import React, { Component, ComponentType, createElement } from 'react';

/**
 * ErrorBoundary 내부 State.
 *
 * `hasError` (error가 있는지 여부)와 error(`Error`객체)를 갖게 된다.
 */
type TerrorBoundaryState = {
  hasError: boolean;
  error: Error | null;
};

/**
 * fallback property에 올 컴포넌트가 받을 prop
 */
type TfallbackProps = {
  /**
   * 에러 객체 담긴 prop
   */
  error: Error | null;
  /**
   * `QueryErrorResetBoundary`에서 넘겨준 `reset` 함수를 `onReset 프로퍼티`로 받게 되어있음. 그 onReset을 실행하고 에러 상태를 기본으로 초기화 하는 함수 prop
   */
  resetErrorBoundary: () => void; // resetErrorBoundary 함수를 사용하는 쪽에서 사용 가능하도록 props로 전달
};

/**
 * ErrorBoundary가 받게 될 Props
 */
export type TerrorBoundaryProps = {
  /**
   * @description fallback 용도의 컴포넌트는 Error 정보를 props로 받을 수 있는 컴포넌트여야 한다.
   */
  fallback: ComponentType<TfallbackProps>;
  onReset: () => void;
  children: React.ReactNode;
};

class ErrorBoundary extends Component<TerrorBoundaryProps, TerrorBoundaryState> {
  constructor(props: TerrorBoundaryProps) {
    super(props); // Constructors for derived classes must contain a 'super' call.ts(2377) => 그렇다고 한다.
    this.state = {
      hasError: false, // 오류가 발생했는지 여부를 state 상태로 저장
      error: null, // 발생한 오류의 정보를 state 상태로 저장
    };

    this.resetErrorBoundary = this.resetErrorBoundary.bind(this); // ❓ this 바인딩 처리. 왜 굳이 바인딩을 했을까? `여기 공부 필요함`
  }
  /**
   * derived 유래된, 파생된
   * `getDerivedStateFromError` 메소드는 하위 컴포넌트에서 오류의 정보를 return을 통해서 State에 저장하는 역할을 합니다.error 파라미터는 발생한 오류의 정보를 담고 있습니다.
   */
  static getDerivedStateFromError(error: Error): TerrorBoundaryState {
    // 오류 상태 업데이트
    return {
      hasError: true,
      error,
    };
  }

  /**
   * `QueryErrorResetBoundary`에서 넘겨준 `reset` 함수를 `onReset 프로퍼티`로 받게 되어있음. 그 onReset을 실행하고 에러 상태를 기본으로 초기화 하는 함수
   */
  resetErrorBoundary(): void {
    this.props.onReset();

    // 에러 상태를 기본으로 초기화합니다.
    this.setState({
      hasError: false,
      error: null,
    });
  }

  /**
   * TIL: componentDidCatch 메소드는 오류 정보와 상세 정보를 파라미터로 얻을 수 있습니다. 주로 오류를 로깅해야 할때 해당 메소드에 접근해서 로깅할 수 있습니다.
   * * error는 어떤 에러가 발생했는지, errorInfo는 어디에 있는 코드에서 오류가 발생했는지에 대한 정보입니다.
   */
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.log({ error, errorInfo });
  }

  render(): React.ReactNode {
    const { state, props, resetErrorBoundary } = this;
    const { hasError, error } = state;
    const { fallback, children } = props;
    const fallbackProps: TfallbackProps = {
      error,
      resetErrorBoundary,
    };

    /**
     * fallback 컴포넌트 측에서 오류 정보를 props로 받을 수 있도록 설정
     */
    const fallbackComponent = createElement(fallback, fallbackProps);

    /**
     * `hasError` state를 통해 오류 발생 여부를 체크하여, 오류가 발생했을때 조건부 렌더링 처리를 해줍니다.
     */
    return hasError ? fallbackComponent : children;
  }
}

export default ErrorBoundary;

---

 

함수형 컴포넌트의 여러 hook은 따로 글을 정리해 두었습니다.

🔗리액트 함수형 컴포넌트 여러 hooks

 

함수형 컴포넌트로 많이 넘어온 이유 정리

1. `this`로 현재 생성자에 접근하기 때문에 sideEffect가 발생할 수 있는 클래스형 컴포넌트. `클로저`로 이전 state에 렉시컬 스코프로 접근할 수 있는 함수형 컴포넌트에 비해서 클래스형 컴포넌트는 지금 당장의 `this`가 가리키게 되는 생성자를 가리키기 때문에 sideEffect가 쉽게 발생합니다.

📌예를 들자면, A 유저를 팔로우 한 후 빛의 속도로 3초만에 B 유저 프로필로 이동하면, "B를 팔로우했습니다" 라는 alert 메세지가 나타납니다. (그러나 나는 A 유저를 팔로우 했습니다!) `this`는 mutable하며 현재의 prop을 바라볼 수 밖에 없어서 생기는 문제.

2. 클래스형 컴포넌트의 생명주기에 따른 여러가지 메서드를 함수형 컴포넌트에서는 하나의 훅이 대체할 수 있는 상황이 되다보니 함수형 컴포넌트로 많이 넘어온 것 같다고 생각.