Lifecycle 생명주기

이번에는 컴포넌트의 Lifecycle(생명주기)에 대해서 공부했다.

컴포넌트가 렌더링 될 때 몇 가지 상태 변화가 있는데 크게 몇 가지로 나눌 수 있다.

• 생성될 때
• 화면에 등장한(mount)후
• 새로운 props를 받을 때
• 새로운 상태를 가질 때
• 새로운 상태를 갖고 난 후
• 화면에서 사라지기(unmount) 전

이러한 상태 변화들은 생명 주기에 따라 나눌 수 있다.

React Lifecycle

 

이전 글의 Toggle 클래스를 불러와 이러한 생명주기를 적용해보면

import React from "react";
import "./styles.css";

function App (){
  return (
    <div className="App">
      <Toggle />
    </div>
  );
 
}

class Toggle extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      isOn: false,
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(){
    this.setState({
      isOn: !this.state.isOn,
    })
  	console.log(this.state.isOn);
  }
	
  // 컴포넌트가 생성될 때
  componentDidMount(){
    console.log('DidMount')
  }
  
  // 컴포넌트의 상태가 변화할 때
  componentDidUpdate(){
    console.log('DidMUpdate')
  }
  
  // 컴포넌트가 없어질 때
  componentWillUnmount(){
    console.log('WillUnMount')
  }

  render(){
    return (
     <div>
       <button onClick={this.handleChange}>{this.state.isOn? "ON": "OFF"}</button>
     </div>
    );
  }

}

export default App

콘솔창

처음에 componentDidMount()가 실행되어 DidMount라는 콘솔이 찍혔고

그 이후에 버튼을 클릭하여 this.setState()를 통해 this.state에 상태 변화가 일어나
componentDidUpdate()가 실행되어 DidUpdate가 찍혔으며

임의로 컴포넌트를 삭제하였더니 componentWillUnMount()가 실행되어 WillUnMount가 찍혔다.

이를 통해 컴포넌트의 생명 주기를 알아볼 수 있었다.