[React] 클래스 컴포넌트 생명주기(lifecycle) 이해하기

 

해당 글은 React의 '클래스형 컴포넌트'의 '생명주기(lifecycle)'를 이해하기 위한 글입니다.

 

 

1) React의 생명주기 용어

---

용어	설명
~ will	어떤 '작업을 수행하기 전에 실행되는 메서드와 관련된 용어입니다.
~ did	어떤' 작업을 수행한 이후'에 실행되는 메서드와 관련된 용어입니다.
mount	컴포넌트 내에서 'DOM이 생성'되고 웹 브라우저 상에 나타는 메서드와 관련된 용어입니다.
unmount	컴포넌트 내에서 'DOM을 제거'되고 웹 브라우저 상에 사라지는 메서드와 관련된 용어입니다.
update	컴포넌트 내에서 '변화'가 발생하였을때 수행하는것을 의미합니다. ex) props, state, 부모 컴포넌트의 리 렌더링, forceUpdate를 통해 강제로 변경하는 경우

 

 

2) React의 생명주기 상세 설명

---

💡  해당 생명주기의 기준은 React 17 이상 버전을 기준으로 하였습니다.

[출처] https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

💡 생명주기 순서 요약

1. 컴포넌트가 호출이 되어 로드됩니다.

2. constructor() 함수 실행
- 데이터의 바인딩, 초기화를 수행합니다.

3. render() 함수 실행
- 화면의 렌더링을 수행합니다.

4. ComponenDidMount() 실행
- 렌더링 이후 컴포넌트를 DOM 트리에 삽입(마운트)합니다

💡조건부 수행 

5-1. componentDidUpdate() 실행
- 컴포넌트의 '변화'가 발생하는 경우 수행합니다.

5-2. componentWillUnmount() 실행
- 컴포넌트의 '소멸'이 발생하는 경우 수행합니다.

 

[ 더 알아가기 ]

💡 레거시 생명주기 메서드?

- React 17 버전부터 기존에 사용이 되던 라이프 사이클에 대해서 deprecated 된 메서드들이 있습니다.

💡 deprecated 된 메서드 

1. componentWillMount() -> UNSAFE_componentWillMount()
2. componentWillUpdate() -> UNSAFE_componentWillUpdate()
3. componentWillReceiveProps() -> UNSAFE_componentWillReceiveProps()

- 이는 UNSAFE_ 접두어로 사용이 가능하나, 공식 사이트에서 새로 만드는 코드에서 사용을 하지 않기를 권하고 있습니다. 이를 참고하시면 좋을 것 같습니다.

[참고] https://ko.reactjs.org/docs/react-component.html#legacy-lifecycle-methods


💡 잘 사용하지 않는 생명주기 메서드? 

- 공식 사이트에서도 '잘 사용하지 않는 생명주기 메서드'로 언급한 라이프 사이클 메서드에 대해서는 해당 글에서는 언급하지 않았습니다. 더 궁금하시다면 아래의 참고 링크를 참고하시면 될 것 같습니다.

1. shouldComponentUpdate()
2. getDerivedStateFromProps()
3. getSnapshotBeforeUpdate()
4. getDerivedStateFromError()
5. componentDidCatch()

[참고] https://ko.reactjs.org/docs/react-component.html#rarely-used-lifecycle-methods

 

 

1. [Mounting] constructor()

---

💡constructor()

- 컴포넌트가 호출되어 로드가 된 이후 렌더링되기 이전에 '데이터 바인딩', '초기화'를 수행하기 위해 호출되는 함수를 의미합니다.

- 생성한 함수를 '데이터 바인딩'할 때 사용이 됩니다.
- state의 저장공간에 변수값을 '초기화' 할 때 사용이 됩니다.

 

[참고] 해당 메서드 사용 예시

import React from "react";

/**
 * 클래스형 컴포넌트 예시
 */
class LifecycleClassComponent extends React.Component<any, any> {
    /**
     * 컴포넌트가 새로 생성이 될때마다 호출이 되는 클래스 생성자 메서드를 의미한다.
     * @param props
     */
    constructor(props: any) {
        super(props);
        this.state = {
            userId: "adjh54",
            userAge: 50
        }
    };
    /**
     * 미리 구현한 HTML를 화면상에 보여주는 메서드이다.
     */
    render(): React.ReactNode {
        return (
            <div>
                <h1>Main ClassComponent 입니다.</h1>
                <div>{this.state.userAge}</div>
            </div>
        );
    };
};
export default LifecycleClassComponent;

 

 

2. [Mounting] render()

---

💡render()

- 미리 구현된 HTML을 화면상에 그려지는 과정(렌더링)을 수행하는 함수를 의미합니다.

- 해당 메서드 안에서는 부모 컴포넌트로 전달받은 'props 값의 접근'이 가능합니다
- constructor()에서 정의한 'state 값의 접근이 가능합니다.
- 해당 공간에서는 setState()를 사용할 수 없습니다.

 

[참고] 해당 메서드 사용 예시

import React from "react";

/**
 * 클래스형 컴포넌트 예시
 */
class LifecycleClassComponent extends React.Component<any, any> {
	/**
	 * 미리 구현한 HTML를 화면상에 보여주는 메서드이다.
	 */
	render(): ReactNode {
	    return (
	        <div>
	            <h1>Main ClassComponent 입니다.</h1>
	            <div>{this.state.userAge}</div>
	        </div>
	    );
	};
}
export default LifecycleClassComponent;

 

 

3. [Mounting] ComponentDidMount()

---

💡ComponentDidMount() 

- 화면이 렌더링 된 이후에 해당 '컴포넌트를 DOM 트리에 삽입'(마운트)이 되면 발생하는 메서드를 의미합니다.

- 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록에 사용됩니다.
- setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리할 때 사용됩니다.

[ 더 알아보기 ]

💡 마운트(Mount)

- 컴포넌트가 'DOM에 추가'되는 동작을 의미합니다.

 

 

[참고] 해당 메서드 사용 예시

import React, { ReactNode } from "react";
/**
 * 클래스형 컴포넌트 예시
 */
class LifecycleClassComponent extends React.Component<any, any> {

    /**
     * 컴포넌트가 새로 생성이 될때마다 호출이 되는 클래스 생성자 메서드를 의미한다.
     * @param props
     */
    constructor(props: any) {
        super(props);
        this.state = {
            userId: "adjh54",
            userAge: 50
        }
    };

    /**
     * 컴포넌트 내에서 렌더링이 수행된 이후에 실행이 되는 메서드이다.
     * @returns {void}
     */
    componentDidMount = (): void => {
        console.log("화면이 렌더링 된 이후에 바로 수행이 됨: componentDidMount()");
    };

    /**
     * 미리 구현한 HTML를 화면상에 보여주는 메서드이다.
     */
    render(): ReactNode {
        return (
            <div>
                <h1>Main ClassComponent 입니다.</h1>
                <div>{this.state.userAge}</div>

            </div>
        );
    };

};
export default LifecycleClassComponent;

 

 

4. [Updating] componentDidUpdate()

---

💡 componentDidUpdate()

- 컴포넌트 내에서 '변화'가 발생된 이후 호출되는 메서드를 의미합니다.

1. props의 변경 : 부모 컴포넌트로부터 전달받은 props 값의 변화가 발생하는 경우 해당 메서드가 수행됩니다.
2. state의 변경 : 해당 컴포넌트 내에서 state의 값을 변경하는 경우 해당 메서드가 수행됩니다.
3. forceUpdate() 수행:  메서드를 통해 강제로 변경하는 경우에 해당 메서드가 수행됩니다.

 

[참고] 해당 메서드 사용 예시

const LifecycleClassComponent: React.FC = (props: any) => {
    /**
   * 컴포넌트가 새로 생성이 될때마다 호출이 되는 클래스 생성자 메서드를 의미한다.
   * @param props
   */
    constructor(props: any) {
        super(props);
        this.state = {
            userId: "adjh54",
            userAge: 50
        }
    };

    /**
     * 컴포넌트 내에서 변화가 발생하였을 경우에 실행되는 메서드이다.
     * @param prevProps : 이전 Props의 값
     * @param prevState : 이전 State의 값
     */
    componentDidUpdate = (prevProps: any, prevState: LifecycleType): void => {
        if (this.props.appState !== prevProps.appState) {
            console.log("전달 받은 props의 값에 변화가 생겼을 경우 수행이 된다.")
        }
        // State 값 중 userAge의 값의 변화가 생겼을 경우 수행이 된다.
        if (this.state.userAge !== prevState.userAge) {
            console.log("사용자 나이의 변화가 발생하였을 경우 수행이 된다.")
        }
    }
}
export default LifecycleClassComponent;

 

 

 

5. [Unmounting] componentWillUnmount()

---

💡 componentWillUnmount

-  컴포넌트가 DOM에서 제거되기 직전에 호출되는 메서드입니다


1. 컴포넌트에서 사용 중인 리소스를 해제하거나 구독을 취소하는 경우 수행됩니다.
2. 타이머를 해제하는 경우 수행이 됩니다.
3. 네트워크 요청을 취소하는 등의 클린업 작업을 하는 경우 수행됩니다.

- A, B라는 컴포넌트가 존재할 경우에 특정 이벤트에 따라서 A는 마운트하고, B는 언 마운트를 하고자 할 때에 이를 사용합니다.

예를 들어 A라는 컴포넌트 내에서 B라는 컴포넌트를 부르고 있을 전제라고 할 때, B 컴포넌트를 조건부에 따라서 소멸을 시킬 경우 해당 라이프사이클 메서드가 수행이 됩니다

[ 더 알아보기 ] 

💡 언마운트(Unmount)

- 컴포넌트가 DOM에서 제거되는 것을 '언마운트'라고 합니다.

 

 

 

 

[참고] 해당 메서드 사용 예시

💡 LifecycleClassComponent이라는 컴포넌트에서 LifeCycleTempComponent라는 컴포넌트를 화면상에 보여주고 있습니다.

💡 버튼을 눌렀을 경우 해당 컴포넌트가 제외될 때, LifeCycleTempComponen 컴포넌트의 'componentWillUnmount()'가 수행되는 것을 확인할 수 있습니다.

/**
 * 클래스형 컴포넌트 예시
 */
class LifecycleClassComponent extends React.Component<any, LifecycleType> {
		/**
     * 컴포넌트가 새로 생성이 될때마다 호출이 되는 클래스 생성자 메서드를 의미한다.
     * @param props
     */
    constructor(props: any) {
        super(props);
        this.state = {
            userId: "adjh54",
            userAge: 50,
            isShowTempComponent: true
        }
    };

	/**
   * TempComponent를 화면상에 제외 시킨다.
   */
  deleteTempComponent = (): void => {
      this.setState({
          ...this.state,
          isShowTempComponent: false,
      })
  };

  /**
   * 미리 구현한 HTML를 화면상에 보여주는 메서드이다.
   */
  render(): React.ReactNode {
      return (
          <div>
              <h1>Main ClassComponent 입니다.</h1>
              <div>{this.state.userAge}</div>
              {
                  this.state.isShowTempComponent && (
                      <LifeCycleTempComponent></LifeCycleTempComponent>
                  )
              }
              <button onClick={this.deleteTempComponent}>컴포넌트 제거</button>
          </div>
      );
  };
}

import React, { Component } from 'react';

/**
 * componentWillUnmount 테스트 컴포넌트 
 */
class LifeCycleTempComponen extends Component<any, any> {

    constructor(props: any) {
        super(props);
        this.state = {}
    }

    componentWillUnmount = () => {
        console.log("해당 컴포넌트가 삭제 되었습니다.")
    }

    render() {
        return (
            <div>
                <h1> 임시 컴포넌트 입니다.</h1>
            </div >
        )
    }
}
export default LifeCycleTempComponen;

 

[참고] 출력 화면-1 : '컴포넌트 제거' 버튼을 누르기 전 화면

 

[참고] 출력 화면-2 : 컴포넌트가 제거되고 componentWillUnmount()가 수행되는 화면