[React]라이프 사이클

컴포넌트의 생명주기

라이프 사이클이란?

컴포넌트의 생명주기, 즉 라이프 사이클을 다루는 것은 컴포넌트가 생겨나고, 변화하고, 없어지는 일련의 프로세스를 프로그래머가 통제하는 것을 뜻한다.

라이프 사이클

컴포넌트가 로딩되기 시작하는 Mounting

- construct 클래스 생성자

클래스형 컴포넌트의 생성이 되기 때문에 생성자가 제일 먼저 호출된다.

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

생성자에서 super(props)를 써주는 이유

- 실제 로딩이 이루어지는 render

생성자 호출 이후 render 메소드가 호출된다. render 메소드가 호출되면서 JSX가 HTML로 변환되어 우리가 보는 웹 브라우저에 나타나게 된다. render 메소드는 state, props의 업데이트시에도 동작한다. 따라서, render 메소드에서는 setState나 props를 변화시키는 메소드를 피해야한다.

- 처음 로딩이 끝난 뒤에 수행되는 componentDidMount

mounting의 마지막 부분으로 render 메소드에 있는 모든 부분들이 브루어저에 나타나게 되었을 때만 실행되는 메소드이다. 컴포넌트의 데이터가 업데이트 되어도 이 메소드는 다시 수행되지 않는다. 따라서 componentDidMount 메소드에서 DOM을 직접 조작할 수 있게된다.(하지만 리액트는 DOM을 직접 조작하는 일은 많지 않다.)

컴포넌트의 업데이트 Updating

- state, props의 변경

리액트는 현재 컴포넌트에서 state나 props의 변경의 유무로 판단한다.

- 데이터가 변경 되었으니 변경사항에 대한 render

리액트는 변경사항을 감지해 다시 변경된 부분을 렌더링해준다.

- 변경이 완료된 이후 수행되는 componentDidUpdate

컴포넌트의 변경이 완료되었을 때에 수행되는 메소드이다. 이 메소드는 조금 복잡한 작업을 수행하기에 최적화 되어있는 메소드인데, render 메소드가 실행되어 업데이트 된 state, props와 업데이트 되기 전인 state, props를 가지고 비교 작업을 가능하게 해준다.

컴포넌트의 삭제 Unmounting

- 컴포넌트 삭제 시 수행되는, componentWillUnmount

컴포넌트가 사라질 때에 수행되는 메소드이다. 우리가 컴포넌트 내에 할당해 놓았던 여러가지 변수들을 해제 시켜 줄수 있다.

클래스형 라이프사이클 예제

import React from "react";

class LifecycleEx extends React.Component {
  // 가장 먼저 실행되는 생성자
  constructor(props) {
    super(props);
    this.state = {
      cat_name: '나비',
    };
    console.log('in constructor!');
  }
  
  // state 업데이트
  // componentDidUpdate()를 보기 위해 사용, 
  changeCatName = () => {
    this.setState({cat_name: '바둑이'});
    console.log('고양이 이름을 바꾼다!');
  }
  
  // 처음 로딩이 끝난 뒤 수행
  componentDidMount() {
    console.log('in componentDidMount!');
  }

  // 컴포넌트의 변경 완료 뒤 수행
  componentDidUpdate(prevProps, prevState) {
    console.log(prevProps, prevState);
    console.log('in componentDidUpdate!');
  }

  // 컴포넌트 삭제 시 수행
  componentWillUnmount() {
    console.log('in componentWillUnmount!');
  }

  // 실제 로딩이 이루어지는 부분
  render() {
    console.log('in render!');
    return (
      <div>
        <h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
        <button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
      </div>
    );
  }
}

export default LifecycleEx;