[React] 컴포넌트 라이프사이클(+타이머 예제)

라이프사이클 : 어떤 객체가 생성부터 파괴되는 시점 사이에서 자동으로 호출되는 메서드들의 집합

 

<컴포넌트의 라이프사이클>

 

컴포넌트 생성과 DOM에 마운트

- 컴포넌트가 생성되고, DOM에 마운트(추가)될 때 다음과 같은 순서로 메서드가 호출된다. 이러한 과정은 딱 한번만 반복된다

• constructor(props) : 객체가 생성될 때
• componentWillMount() : 컴포넌트가 DOM에 마운트되기 직전
• render() : 컴포넌트가 렌더링될 때
• componentDidMount() : 컴포넌트가 DOM에 마운트된 직후.

컴포넌트 업데이트

- 컴포넌트의 프로퍼티가 변경되면 다음과 같은 메서드가 호출된다.

• componentWillReceiveProps(nextProps) : 컴포넌트의 프로퍼티가 변경될 때, 새로운 속성을 받았을때 호출된다.
  • 이 메서드 내부에서 setState()메서드를 호출해 컴포넌트의 상태를 변경할 수 있다. 다른 업데이트 계열의 라이프사이클에서 setState()를 호출하면 업데이트 이벤트가 재귀적으로 발생하므로 setState()는 해당 메서드 내부에서만 사용하는 것이 좋다.
• shouldComponentUpdate(nextProps, nextState) : 컴포넌트의 외관을 변경해도 좋을지 판단할 때
  • true or false를 반환한다.
  • 성능 튜닝이 필요한 경우에 활용하면 좋다고 한다.
• componentWillUpdate() : 컴포넌트가 업데이트되기 직전
• render() : 컴포넌트가 렌더링될 때
• componentDidUpdate : 컴포넌트가 업데이트된 직후

DOM에서 언마운트

- 컴포넌트가 DOM에서 언마운트(제거)될 때 다음과 같은 메서드가 호출된다.

• componentWillUnmount()

src/StopWatch.js

import React, { Component } from 'react';
 
class Stopwatch extends Component {
    constructor(props){
        super(props)
        this.state = {
            isLive : false,
            curTime : 0,
            startTime : 0
        }
        this.timerId = 0
    }
 
    componentWillMount(){
        this.timerId = setInterval(e => {this.tick()}, 1000)
    }
 
    componentWillUnmount(){
        clearInterval(this.timerId)
    }
    tick(){
        if(this.state.isLive){
            this.setState({
                curTime : new Date().getTime()
            })
        }
    }
    getDisp (){
        const s = this.state
        const delta = s.curTime - s.startTime /* 유닉스 타임으로 시간 구하기. */
        const t = Math.floor(delta / 1000) 
        const ss = t % 60
        const m = Math.floor(t / 60)
        const mm = m % 60
        const hh = Math.floor(mm / 60)
        const z = (num) => {
            const s = '00' + String(num)
            return s.substr(s.length - 2, 2)
        }
        return <span className = 'disp'>
            {z(hh)}:{z(mm)}:{z(ss)}
        </span>
    }
    render(){
        let label = 'START'
        if(this.state.isLive){
            label = 'STOP'
        }
        return (
        <div>
            <div>{this.getDisp()}</div> 
            <button onClick={(e)=>{
                if(this.state.isLive){
                    //STOP 클릭
                    this.setState({
                        isLive : false
                    })
                } else{
                    //START 클릭
                    const v = new Date().getTime()
                    this.setState({
                        curTime : v,
                        startTime : v,
                        isLive : true
                    })
                }
            }}>{label}</button>
        </div>
 
        );
  }
}
 
export default Stopwatch;

 

출처 : 모던 자바스크립트 개발자를 위한 리액트 프로그래밍 3장