[7주차] React 생명주기

3월 4일 자 학습 내용 정리입니다.

 

 

✅ React 생명주기

React의 생명주기는 컴포넌트가 이벤트를 다룰 수 있는 특정 시점을 말하며 마운트, 업데이트, 언마운트 상태로 구성되어 있다.

컴포넌트가 실제 DOM에 삽입되는 것을 마운트(mount), 컴포넌트가 변하는 것을 업데이트(update), 컴포넌트가 DOM 상에서 제거되는 것을 언마운트(unmount)라고 한다.

 

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

 

생명주기 메서드는 다음과 같다.

• constructor() : State 데이터를 초기화하는 메서드
• render() : 화면에 그릴 부분, 반드시 구현되어야 함
• componentDidMount() : 컴포넌트가 마운트된 직후 호출되는 메서드
• componentDidUpdate() : 업데이트가 진행된 직후 호출되는 메서드
• componentWillUnmonunt() : 컴포넌트가 언마운트되어 제거되기 직전에 호출되는 메서드

 

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    // State 데이터 초기화
    super(props);
    this.state = ...
  }
  componentDidMount() {
    // 컴포넌트가 마운트된 직후 호출되는 메서드
    this.setState(...)
  }
  componentDidUpdate() {
    // 컴포넌트가 업데이트된 직후 호출되는 메서드
    this.setState(...)
  }
  componentWillUnmount() {
    // 컴포넌트가 언마운트되어 제거되기 직전에 호출되는 메서드
    this.setState(...)
  }
  render() {
    return <div>App</div>;
  }
}

 

state와 생명주기를 함수형 컴포넌트에서도 관리하는 것이 가능하도록 만들어진 것이 Hook이다.

Hook의 생명주기는 다음과 같다.

 

출처 : https://wavez.github.io/react-hooks-lifecycle/