[리액트] 클래스형 컴포넌트 라이프사이클 메서드 componentDidMount 예제

componentDidMount

문법

componentDidMount() {
  // 렌더링 시 실행될 코드
}

예제

import React, { Component } from 'react';

class Comp extends Component {
  constructor(props) {
    super(props);
      this.state = {
        num: 0
      }
    }
  
  // 랜더링시 실행되는 메서드이므로 화면에 컴포넌트가 출력되기 전에 num의 state 값이 10으로 변경된다
  componentDidMount() {
    this.setState({
      num: 10
    });
  }

  render() {
    return (
      <div>
        // 최종 출력되는 num 값은 10이다
        <h1>{this.state.num}</h1>
      </div>
    );
  }
}

export default Comp;