[React Interview] 컴포넌트 라이프 사이클

아래 링크를 참고하여 작성된 글입니다.

누구든지 하는 리액트 5편: LifeCycle API | VELOPERT.LOG

1. 컴포넌트 라이프 사이클

라이프 사이클은 총 10가지로 구성되어 있으며, 접두사를 통해 메서드의 실행 시기를 알 수 있습니다.

• Will : 어떤 작업을 작동하기 전에 실행하는 메소드의 접두사
• Did : 어떤 작업을 한 후에 실행되는 메서드의 접두사

또한, 라이프 사이클은 총 3가지 카테고리로 나눌 수 있습니다.

• Mount : DOM이 생성되고, 웹 브라우저 상에 나타나는 것을 말한다.
• Update : 컴포넌트를 업데이트하는 경우를 말한다.
• Unmount : 컴포넌트를 DOM에서 제거하는 것을 말한다.

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

// import ContentTodo from "./containers/contentTodo";

class App extends Component {
  state = {
    count: 0,
  };
  constructor(props) {
    super(props);
    console.log("constructor, 컴포넌트가 새로 만들어질때 호출");
  }

  componentWillMount() {
    console.log(
      "componentWillMount, 컴포넌트가 화면에 나타나기 직전에 호출, (더 이상 사용하지 않음)"
    );
  }

  componentDidMount() {
    console.log(
      "componentDidMount, 컴포넌트가 화면에 나타난 후 호출 (외부 하이브러리 연동, 데이터 요청 등 작업)"
    );
    //주로 DOM을 사용해야 하는 외부 라이브러리를 연동하거나,
    //해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch등을 통하여 ajax 요청을 하거나,
    //DOM의 속성을 읽거나 직접 변경하는 작업을 진행
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    if (nextState.count % 5 === 0) return false;
    return true;
    //Virtual DOM에 리렌더링하는 것도 불 필요할 경우에 사용
    //default return true
    //return false -> render 함수 호출 x
  }

  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate, (더 이상 사용하지 않음)");
    //shouldComponentUpdate에서 true를 반환했을때만 호출,
    //애니메이션 효과를 초기화, 리스너를 없애는 작업에 사용,
    //getSnapshotBeforeUpdate 로 대체
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate, render함수를 호출하고 난 후 발생");
  }

  handleIncrease = () => {
    const { count } = this.state;
    this.setState({
      count: count + 1,
    });
  };

  handleDecrease = () => {
    const { count } = this.state;
    this.setState({
      count: count - 1,
    });
  };

  render() {
    console.log("render");
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.count}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default App;

counter가 5의 배수일때는 리 랜더링 되지 않고 넘어가는 것을 확인할 수 있습니다.