🔃React Lifecycle (class component)

#️⃣React Lifecycle

React 컴포넌트가 생성될 때, 업데이트될 때, 그리고 제거될 때 일어나는 일련의 단계를 설명하는 개념으로 모든 React 컴포넌트는 동일한 생명주기를 거친다.

생성(mounting) → 업데이트(updating) → 제거(unmounting)

컴포넌트는 화면에 추가될 때 마운트된다.
컴포넌트는 새로운 props나 state를 받으면 업데이트된다. 이는 보통 상호작용에 대한 응답으로 발생한다.
화면에서 제거되면 컴포넌트가 마운트 해제된다.

클래스형 컴포넌트의 경우 특정 라이프 사이클 메소드를 사용하며 함수형 컴포넌트에서는 Hook을 사용하여 클래스형 component 의 lifeCycle처럼 관리가 가능하다.

React의 생명주기 용어

용어

설명

~ will

어떤 '작업을 수행하기 전에 실행되는 메서드와 관련된 용어

~ did

어떤' 작업을 수행한 이후'에 실행되는 메서드와 관련된 용어

mount

컴포넌트 내에서 'DOM이 생성'되고 웹 브라우저 상에 나타나는 메서드와 관련된 용어

update

컴포넌트 내에서 '변화'가 발생했을 때 수행하는 것 ex) props, state, 부모 컴포넌트의 리 렌더링, forceUpdate를 통해 강제로 변경하는 경우

unmount

컴포넌트 내에서 'DOM이 제거'되고 웹 브라우저 상에 사라지는 메서드와 관련된 용어

#️⃣Class Component Lifecycle

1. Mounting

▸constructor()

컴포넌트가 호출되어 로드가 된 이후 렌더링되기 이전에 '데이터 *바인딩', '초기화'를 수행하기 위해 호출되는 함수. 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 된다.

*바인딩 : 두 개의 데이터 소스(또는 동일한 데이터에 대한 두 개의 개별 표현)를 함께 연결하고 동기화 상태를 유지하는 일반적인 기술. react에서는 부모 → 자식 단방향 바인딩이 이루어진다.

▸render()

미리 구현된 HTML을 화면상에 그려지는 과정(렌더링)을 수행하는 함수 클래스 컴포넌트에서 반드시 구현되야 하는 유일한 메서드이며 React.Component의 하위 class에서 반드시 정의해야 하는 메서드이다.

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

▸componentDidMount()

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

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

2. Updating

▸componentDidUpdate(prevProps, prevState, snapshot)

컴포넌트 내에서 '변화'가 발생된 이후 호출되는 메서드

DidMount()가 첫 렌더링 후에 호출 되는 함수라면, DidUpdate()는 리렌더링을 완료한 후 실행되는 함수이다.

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

3. Unmounting

▸componentWillUnmount()

컴포넌트가 DOM에서 제거되기 직전에 호출되는 메서드 (더는 컴포넌트를 사용하지 않을 때) 1. 컴포넌트에서 사용 중인 리소스를 해제하거나 구독을 취소하는 경우 2. 타이머를 해제하는 경우 3. 네트워크 요청을 취소하는 등의 클린업 작업을 하는 경우

import React from "react";

// 클래스형 컴포넌트
class LifecycleClassComponent extends React.Component {
  // constructor: 생성자 함수 - 초기값의 설정
  constructor(props) {
    super(props);
    this.state = {my_name: "Wynter24",};
    console.log("in constructor!");
  }

  changeMyName = () => {
    //state값 변경 
    this.setState({ cat_name: "Amanda" });
    console.log("이름을 변경합니다!");
  };

  //componentDidMount() 
  componentDidMount() {
    console.log("화면이 렌더링 된 이후에 바로 수행이 됨: componentDidMount()");
  }

  //componentDidUpdate
  // 컴포넌트 내에서 변화가 발생하였을 경우에 실행되는 메서드이다.
  // prevProps : 이전 Props의 값
  //  prevState : 이전 State의 값
  componentDidUpdate(prevProps, prevState) {
    console.log(prevProps, prevState);
    console.log("in componentDidUpdate!");
  }

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

  //render
  render() {
    console.log("in render!");
    return (
      <div>
        <h1>제 이름은 {this.state.my_name}입니다.</h1>
        <button onClick={this.changeMyName}>내 이름 바꾸기</button>
      </div>
    );
  }
}

export default LifecycleClassComponent;
```